/* Brain Club design system — tokens and components.
   One file every surface imports: the site, the workspace, the apps.
   Rules and the reasons behind them: design/README.md. */

/* ── tokens ─────────────────────────────────────────────────────────── */
:root {
  /* colour — plum is the brand ink, sage means "done", nothing else is loud */
  --bc-canvas: #F6F5F8;      /* page: cool neutral with a trace of lilac */
  --bc-surface: #FFFFFF;     /* paper: every sheet of work sits on white */
  --bc-ink: #1F1026;         /* text: plum-black, never pure #000 */
  --bc-ink-2: #5E5466;       /* secondary text */
  --bc-ink-3: #8C8394;       /* hints, captions */
  --bc-plum: #4A1D57;        /* brand + the one primary action per view */
  --bc-plum-hover: #36123F;
  --bc-plum-tint: #EFEAF6;   /* selected, highlighted */
  --bc-sage: #4F7F45;        /* done, approved, filed */
  --bc-sage-tint: #E8F0E4;
  --bc-line: #E5E2EA;        /* hairlines and dividers */
  --bc-focus: #7B5CD6;       /* keyboard focus ring only */

  /* type — Bricolage Grotesque speaks, Instrument Sans explains.
     Both were checked for every Latvian letter: ā č ē ģ ī ķ ļ ņ š ū ž. */
  --bc-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --bc-text: "Instrument Sans", system-ui, sans-serif;
  /* scale: a 1.25 ladder from 14 px */
  --bc-t-xs: 0.875rem;   /* 14 */
  --bc-t-sm: 1rem;       /* 16 */
  --bc-t-md: 1.125rem;   /* 18 — body */
  --bc-t-lg: 1.375rem;   /* 22 — lead */
  --bc-t-xl: 1.75rem;    /* 28 — card title */
  --bc-t-2xl: 2.25rem;   /* 36 */
  --bc-t-3xl: clamp(2.25rem, 4.2vw, 3.5rem);   /* section title */
  --bc-t-4xl: clamp(2.75rem, 6.6vw, 5.75rem);  /* the one headline */

  /* space — 4 px base */
  --bc-s1: 4px; --bc-s2: 8px; --bc-s3: 12px; --bc-s4: 16px; --bc-s5: 24px;
  --bc-s6: 32px; --bc-s7: 48px; --bc-s8: 64px; --bc-s9: 96px; --bc-s10: 144px;
  --bc-gutter: clamp(16px, 5vw, 80px);
  --bc-max: 1280px;

  /* shape — radius grows with the size of the thing */
  --bc-r-sm: 8px;     /* inputs, tags */
  --bc-r-md: 12px;    /* buttons, rows */
  --bc-r-lg: 20px;    /* panels, portraits */
  --bc-r-xl: 28px;    /* the big pictures */
  /* one elevation, for the one thing that floats (an approval request) */
  --bc-float: 0 24px 60px -24px rgba(31, 16, 38, .35), 0 2px 6px rgba(31, 16, 38, .06);

  /* ── the brand (owner, 2026-10-04: the plum clay bubble with three gold stars, on gold) ──
     Gold, plum, cream: the colours and clay recipes of the new Brain Club as the landing's kit has them (one-site
     css/kit.css, the living style book /brand/) and the workspace's brand.css uses them. Defining them changes no page:
     a surface opts in with data-bc-look="brand" (below), and then every --bc-* means the brand. The phone's pictures
     (apps/api/glance) read ONLY these — change a value here and the cards follow. */
  --br-gold: #fac93f;        /* the ground */
  --br-gold-1: #ffe58a; --br-gold-2: #fcd04a; --br-gold-3: #efae1e;
  --br-gold-deep: #f2b629;   /* shade */
  --br-gold-ink: #7a4c00;    /* words on a pale gold */
  --br-plum: #64082e;        /* the clay of the bubble, the ink of a headline */
  --br-plum-lit: #a31f62;    /* the highlight */
  --br-plum-deep: #4a0a28;
  --br-plum-night: #2a0518;  /* dark panels */
  --br-cream: #fff5de;       /* paper */
  --br-cream-50: #fffaf0;
  --br-cream-200: #fdebc4;
  --br-ink: #2a0a1c; --br-ink-2: #5b2a44; --br-ink-3: #7a4a62;
  --br-ok: #2a6e45; --br-ok-tint: #e1f1d6;       /* done, paid (the kit's tag tones) */
  --br-late: #a2391d; --br-late-tint: #fbe0d6;   /* late, no signal */
  --br-line: rgba(100, 8, 46, .14); --br-line-2: rgba(100, 8, 46, .30);
  /* the materials: lit from the top left, a bright edge on top, a deeper core, a soft coloured shadow — never a grey box */
  --br-plum-clay: radial-gradient(120% 100% at 24% -8%, #a3205f 0%, #7a0f44 38%, #5c0828 100%);
  --br-plum-shadow: inset 0 2px 1px rgba(255, 255, 255, .26), inset 0 -10px 18px rgba(25, 0, 12, .5), 0 18px 30px -16px rgba(60, 6, 30, .6), 0 3px 0 -1px rgba(50, 3, 24, .5);
  --br-gold-clay: radial-gradient(120% 100% at 24% -8%, #ffe58a 0%, #fcd04a 40%, #efae1e 100%);
  --br-gold-shadow: inset 0 2px 1px rgba(255, 255, 255, .7), inset 0 -8px 14px rgba(170, 100, 0, .32), 0 16px 28px -16px rgba(130, 70, 0, .55), 0 3px 0 -1px rgba(160, 90, 0, .45);
  --br-paper: linear-gradient(180deg, #fffaf0 0%, #fff3d8 100%);
  --br-paper-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(160, 100, 20, .08), 0 20px 36px -22px rgba(90, 40, 10, .42), 0 3px 8px -3px rgba(90, 40, 10, .14);
  --br-gold-ground: radial-gradient(900px 560px at 78% 42%, rgba(255, 243, 196, .8), rgba(255, 243, 196, 0) 70%), radial-gradient(1100px 600px at 6% -8%, rgba(255, 236, 150, .85), rgba(255, 236, 150, 0) 60%), linear-gradient(180deg, #fcd35a 0%, #fac93f 50%, #f1b52a 100%);
  --br-grain-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .40 0 0 0 0 .14 0 0 0 0 .04 0 0 0 .20 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* a surface in the brand: the --bc-* every component reads now mean gold, plum and cream */
[data-bc-look="brand"] {
  --bc-canvas: var(--br-cream); --bc-surface: var(--br-cream-50);
  --bc-ink: var(--br-ink); --bc-ink-2: var(--br-ink-2); --bc-ink-3: var(--br-ink-3);
  --bc-plum: var(--br-plum); --bc-plum-hover: var(--br-plum-deep); --bc-plum-tint: var(--br-cream-200);
  --bc-sage: var(--br-ok); --bc-sage-tint: var(--br-ok-tint);
  --bc-line: var(--br-line); --bc-focus: var(--br-plum-lit);
}

/* ── base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bc-canvas); color: var(--bc-ink); font: 400 var(--bc-t-md)/1.6 var(--bc-text); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; font-family: var(--bc-display); font-weight: 700; font-stretch: 90%; letter-spacing: -0.02em; line-height: 1.05; }
p, ul, ol, figure { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2.5px solid var(--bc-focus); outline-offset: 3px; border-radius: 6px; }
.bc-icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ── components ─────────────────────────────────────────────────────── */

/* button: one primary per view; the secondary is quiet */
.bc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--bc-s2); min-height: 48px; padding: 0 var(--bc-s5); border: 0; border-radius: var(--bc-r-md); background: var(--bc-plum); color: #fff; font-weight: 600; font-size: var(--bc-t-sm); text-decoration: none; cursor: pointer; transition: background .15s; }
.bc-btn:hover { background: var(--bc-plum-hover); }
.bc-btn--quiet { background: transparent; color: var(--bc-plum); box-shadow: inset 0 0 0 1.5px var(--bc-line); }
.bc-btn--quiet:hover { background: var(--bc-surface); box-shadow: inset 0 0 0 1.5px var(--bc-plum); }
.bc-btn--sm { min-height: 38px; padding: 0 var(--bc-s4); font-size: var(--bc-t-xs); border-radius: var(--bc-r-sm); }

/* avatar: a character's face, always their own studio background */
.bc-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; background: var(--bc-plum-tint); flex: none; }
.bc-avatar--lg { width: 56px; height: 56px; }

/* status: what happened to a piece of work — words, colour and a mark */
.bc-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--bc-t-xs); font-weight: 600; white-space: nowrap; }
.bc-status--done { color: var(--bc-sage); }
.bc-status--wait { color: var(--bc-plum); }
.bc-status .bc-icon { width: 18px; height: 18px; stroke-width: 2.2; }

/* approval: the product's one floating object — who asks, what, one decision */
.bc-approval { display: grid; grid-template-columns: auto 1fr; gap: var(--bc-s3) var(--bc-s4); align-items: start; width: min(380px, 100%); padding: var(--bc-s5); background: var(--bc-surface); border-radius: var(--bc-r-lg); box-shadow: var(--bc-float); }
.bc-approval__who { font-size: var(--bc-t-xs); color: var(--bc-ink-3); }
.bc-approval__what { font-size: var(--bc-t-sm); line-height: 1.45; }
.bc-approval__what b { font-weight: 600; }
.bc-approval__act { grid-column: 1 / -1; display: flex; gap: var(--bc-s2); }
.bc-approval.is-done .bc-approval__act { display: none; }
.bc-approval__done { grid-column: 1 / -1; }

/* character frame: a portrait is never cropped at the body — the frame is the backdrop */
.bc-portrait { aspect-ratio: 4 / 5; border-radius: var(--bc-r-lg); overflow: hidden; background: #EEECEF; }
.bc-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* right to left (Arabic, Urdu…): an arrow that means back or forward turns with the page (the playbook design.rtl-languages) */
[dir="rtl"] svg:has(use[href$="#i-arrow-left"]), [dir="rtl"] svg:has(use[href$="#i-arrow-right"]) { transform: scaleX(-1); }