/* ─────────────────────────────────────────────────────────────
   Leksa — design tokens
   Authoritative editorial. Deep ink, warm paper, ochre accent.
   ───────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&family=Geist:wght@300..700&family=Geist+Mono:wght@400;500&display=swap");

:root {
  /* ── Ink (text + structure) ─────────────────────────────── */
  --ink:        #11161D;   /* primary text */
  --ink-2:      #2A323E;   /* secondary text */
  --ink-3:      #5C6675;   /* tertiary text, captions */
  --ink-4:      #8A93A1;   /* meta, placeholder */
  --ink-5:      #B7BDC7;   /* dim icons */

  /* ── Paper (surfaces) ───────────────────────────────────── */
  --paper:      #FAF7F1;   /* app background — warm cream */
  --paper-2:    #F2ECDF;   /* tinted surface */
  --surface:    #FFFFFF;   /* cards, sheets */
  --surface-2:  #FBF9F4;   /* nested surface */

  /* ── Lines & rules ──────────────────────────────────────── */
  --line:       #E6DFD0;   /* warm border */
  --line-2:     #EFE9DB;   /* lighter rule */
  --line-3:     #D9D1BE;   /* stronger rule */
  --hairline:   #C9C0AC;   /* editorial hairline */

  /* ── Brand: deep teal (from Leksa logo) ─────────────────── */
  --brand:       #0E6A7A;   /* logo shield teal */
  --brand-2:     #128294;   /* hover / lighter teal */
  --brand-deep:  #0A4A56;   /* pressed */
  --brand-ink:   #06343D;   /* deepest variant — for text/ink uses */
  --brand-slate: #1A3E54;   /* the slate-navy shadow tone in the logo */
  --brand-tint:  #E2EEF0;   /* faint teal wash */
  --brand-tint-2:#CFE2E5;
  --brand-ink-on: #FAF7F1;  /* on-brand text */

  /* ── Accent: warm gold/ochre (from logo arrow) ──────────── */
  --accent:      #D09030;   /* logo gold — primary accent */
  --accent-2:    #E0A538;
  --accent-deep: #9C6712;
  --accent-tint: #FAEDD3;
  --accent-tint-2: #F2DEAF;

  /* ── Status (confident, not loud) ───────────────────────── */
  --ok:          #2E6F4B;
  --ok-tint:     #E4EFE7;
  --ok-line:     #B4D2BD;

  --warn:        #A56712;   /* attention — amber/ochre */
  --warn-tint:   #F6EAD2;
  --warn-line:   #E5C994;

  --bad:         #9A2A2A;   /* issue — oxblood, not bright */
  --bad-tint:    #F2DCDC;
  --bad-line:    #DDA8A8;

  --info:        #2D5681;
  --info-tint:   #E1EAF3;

  /* ── Type system ────────────────────────────────────────── */
  --font-display: "Newsreader", "Source Serif 4", Georgia, serif;
  --font-serif:   "Newsreader", "Source Serif 4", Georgia, serif;
  --font-sans:    "Geist", "Söhne", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Type scale (modular) */
  --t-xs:   11px;
  --t-sm:   13px;
  --t-base: 15px;
  --t-md:   17px;
  --t-lg:   20px;
  --t-xl:   24px;
  --t-2xl:  32px;
  --t-3xl:  42px;
  --t-4xl:  56px;
  --t-5xl:  72px;

  /* Tracking — editorial small caps need spacing */
  --track-eyebrow: 0.14em;
  --track-tight:   -0.015em;
  --track-tightest:-0.03em;

  /* Leading */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.55;
  --lh-loose: 1.75;

  /* ── Spacing (8-base, with editorial sizes) ─────────────── */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-7:   32px;
  --s-8:   40px;
  --s-9:   56px;
  --s-10:  72px;
  --s-11:  96px;
  --s-12:  128px;

  /* ── Radii ──────────────────────────────────────────────── */
  --r-xs:  4px;
  --r-sm:  6px;
  --r:     10px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-pill: 999px;

  /* ── Shadows (paper-soft, never glossy) ─────────────────── */
  --shadow-1: 0 1px 0 rgba(20, 18, 12, 0.04), 0 1px 2px rgba(20, 18, 12, 0.04);
  --shadow-2: 0 1px 0 rgba(20, 18, 12, 0.04), 0 4px 14px -2px rgba(20, 18, 12, 0.08);
  --shadow-3: 0 2px 0 rgba(20, 18, 12, 0.03), 0 18px 40px -12px rgba(20, 18, 12, 0.18);
  --shadow-paper: 0 1px 0 rgba(20, 18, 12, 0.04), 0 24px 60px -20px rgba(20, 18, 12, 0.18), 0 2px 6px rgba(20, 18, 12, 0.05);

  /* ── Layout ─────────────────────────────────────────────── */
  --sidebar-w: 252px;
  --topbar-h:  72px;
  --content-max: 1120px;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --d-fast: 120ms;
  --d:      200ms;
  --d-slow: 360ms;
}

/* ── Dark mode (deferred but ready) ───────────────────────── */
:root[data-theme="dark"] {
  --ink:        #ECE6D6;
  --ink-2:      #C8C2B2;
  --ink-3:      #8E8775;
  --ink-4:      #6B6555;
  --ink-5:      #4A4538;
  --paper:      #0F1014;
  --paper-2:    #15171C;
  --surface:    #181A20;
  --surface-2:  #1E2027;
  --line:       #2A2C33;
  --line-2:     #22242A;
  --line-3:     #34373F;
  --hairline:   #3A3D45;
  --brand:       #5BBDCC;
  --brand-2:     #7BD0DC;
  --brand-deep:  #3C9AAA;
  --brand-slate: #8BA8B8;
  --brand-tint:  #16282E;
  --brand-tint-2:#1B3239;
  --brand-ink-on: #0F1014;
  --accent:      #E4B264;
  --accent-2:    #ECC07A;
  --accent-deep: #C8902F;
  --accent-tint: #2A2218;
  --accent-tint-2: #3A2E1F;
  --ok-tint:     #1A2620;
  --warn-tint:   #2A2418;
  --bad-tint:    #2A1D1D;
}