/* 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);
}

/* ── 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; } }