/* ==========================================================================
   ToC Builder — Design tokens
   Palette derived from the Leads Impact logo (sampled from the master art):
     navy #153F7D · sky #2DADF2 · teal #00B29B · lime #8BCA01
     gold #F8C501 · crimson #E21548
   The logo is an open door onto a fan of coloured paths. That maps directly
   onto the Theory of Change: the doorway is the impact, the coloured paths
   are the levels of change that lead to it.
   ========================================================================== */

:root {
  /* ---- Brand primitives (never used directly in components) ------------- */
  --brand-navy:      #153f7d;
  --brand-navy-deep: #0e2c58;
  --brand-sky:       #2dadf2;
  --brand-teal:      #00b29b;
  --brand-lime:      #8bca01;
  --brand-gold:      #f8c501;
  --brand-crimson:   #e21548;

  /* ---- Level semantics -------------------------------------------------
     `-solid` is for non-text elements only (rails, dots, bars, connectors).
     `-ink`   is the text-safe tone (all >= 4.5:1 on white).
     `-wash`  is the tinted surface that -ink sits on.                       */
  --lv-impact-solid:  #153f7d;  --lv-impact-ink:  #153f7d;  --lv-impact-wash:  #e7eef8;
  --lv-outcome-solid: #00b29b;  --lv-outcome-ink: #00786a;  --lv-outcome-wash: #e0f6f2;
  --lv-output-solid:  #8bca01;  --lv-output-ink:  #577a00;  --lv-output-wash:  #eff8d8;
  --lv-activity-solid:#f8c501;  --lv-activity-ink:#856300;  --lv-activity-wash:#fdf3d6;
  --lv-assume-solid:  #e21548;  --lv-assume-ink:  #c10b3a;  --lv-assume-wash: #fce7ec;

  /* ---- Interactive ------------------------------------------------------ */
  --accent:        #2dadf2;
  --accent-ink:    #0b72b5;   /* 5.14:1 on white */
  --accent-wash:   #e4f4fd;
  --primary:       #153f7d;
  --primary-hover: #0e2c58;
  --on-primary:    #ffffff;

  /* ---- Surfaces & text -------------------------------------------------- */
  --bg:         #f2f6fb;
  --bg-veil:    #e7eef8;
  --surface:    #ffffff;
  --surface-2:  #f8fbfe;
  --surface-3:  #eef4fb;
  /* Every tier clears 4.5:1 against ALL light surfaces, including the
     tinted level washes — verified, not eyeballed. Worst case is the
     assumption wash for the two muted tiers. */
  --ink:        #0e2140;   /* 16.0:1 on white */
  --ink-soft:   #48596c;   /*  6.1:1 worst case */
  --ink-faint:  #59697f;   /*  4.7:1 worst case */
  --line:       #dde7f3;
  --line-strong:#c3d4e8;

  --danger:      #c10b3a;
  --danger-wash: #fce7ec;
  --success:     #00786a;
  --success-wash:#e0f6f2;

  /* ---- Elevation -------------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(14, 33, 64, .06), 0 1px 3px rgba(14, 33, 64, .04);
  --sh-2: 0 2px 4px rgba(14, 33, 64, .05), 0 6px 16px rgba(14, 33, 64, .07);
  --sh-3: 0 8px 20px rgba(14, 33, 64, .09), 0 24px 48px rgba(14, 33, 64, .10);
  --sh-4: 0 16px 32px rgba(14, 33, 64, .14), 0 40px 80px rgba(14, 33, 64, .16);
  --sh-focus: 0 0 0 3px var(--surface), 0 0 0 6px var(--accent);

  /* ---- Geometry --------------------------------------------------------- */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 14px;
  --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* Spacing — density 5/10 (standard) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* ---- Type ------------------------------------------------------------- */
  --font-head: 'Lexend', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;

  /* Reading tiers sit at or above the 16px web floor; body was 15px, which
     is small for Indonesian prose (it runs 15-20% longer than the English).
     Display tiers are unchanged — the hierarchy needed a taller base, not a
     louder top. */
  --t-xs:  .75rem;    /* 12px — meta, counts, chips           */
  --t-sm:  .875rem;   /* 14px — secondary, dense labels       */
  --t-base: 1rem;     /* 16px — body. The floor.              */
  --t-md:  1.125rem;  /* 18px — lede                          */
  --t-lg:  1.25rem;   /* 20px — card title                    */
  --t-xl:  1.5rem;    /* 24px — section heading               */
  --t-2xl: 1.75rem;   /* 28px — view display                  */
  --t-3xl: 2.25rem;   /* 36px — hero                          */
  --t-4xl: 3rem;      /* 48px — hero, wide viewports          */

  /* Prose measure. One token so every reading surface agrees. */
  --measure: 68ch;
  --measure-tight: 56ch;

  /* ---- Motion ----------------------------------------------------------- */
  /* Deceleration only. An overshoot curve was the default here, which on an
     Operate surface reads as a tic: every routine state change bounced. The
     authored moment is carried by sequence and material (the door opening,
     the colour fan drawing in), not by a curve that springs past its mark. */
  --e-out:      cubic-bezier(.22, 1, .36, 1);   /* decelerate — entrances     */
  --e-inout:    cubic-bezier(.65, 0, .35, 1);   /* symmetric — moves          */
  --e-out-expo: cubic-bezier(.16, 1, .3, 1);    /* confident arrival — focal  */
  --d-fast: 140ms;  --d-base: 240ms;  --d-slow: 420ms;  --d-slower: 720ms;

  /* Body leading and tracking, overridden by the dark theme. */
  --lh-body: 1.6;
  --track-body: 0em;

  --rail: 264px;   /* desktop sidebar */
  --topbar: 64px;
  /* The bottom tab bar's height was written as a bare 72px in two places that
     have to agree: the page's bottom padding and anything anchored above the
     bar. One token, so they cannot drift apart. */
  --mobile-nav-h: 72px;
}

/* ==========================================================================
   Dark theme — brand hues lifted for luminance on a deep navy ground.
   ========================================================================== */
:root[data-theme="dark"] {
  --lv-impact-solid:  #5b9ae8;  --lv-impact-ink:  #97c2f2;  --lv-impact-wash:  #16305a;
  --lv-outcome-solid: #00c9af;  --lv-outcome-ink: #4fdcc7;  --lv-outcome-wash: #0d3b3a;
  --lv-output-solid:  #a5e11a;  --lv-output-ink:  #bced4a;  --lv-output-wash:  #23350d;
  --lv-activity-solid:#ffd233;  --lv-activity-ink:#f7cf55;  --lv-activity-wash:#3a2f0a;
  --lv-assume-solid:  #ff4d73;  --lv-assume-ink:  #ff8ba5;  --lv-assume-wash: #401320;

  --accent:      #4bbcf7;
  --accent-ink:  #78cdf9;
  --accent-wash: #10314f;
  --primary:       #2f6fc4;
  --primary-hover: #3f83da;
  --on-primary:    #ffffff;

  --bg:        #071427;
  --bg-veil:   #0b1e39;
  --surface:   #0f2242;
  --surface-2: #142b51;
  --surface-3: #1a3560;
  --ink:       #eaf2fc;   /* 14.0:1 on the card surface */
  --ink-soft:  #b0c1d9;   /*  6.7:1 worst case */
  --ink-faint: #97abc9;   /*  5.2:1 worst case */
  --line:      #1e3a64;
  --line-strong: #2b4d7d;

  --danger:      #ff8ba5;
  --danger-wash: #401320;
  --success:     #4fdcc7;
  --success-wash:#0d3b3a;

  /* Light text on a dark ground reads tighter and heavier than the same type
     on white, so the dark theme buys back a little leading and tracking. */
  --lh-body: 1.68;
  --track-body: .006em;

  --sh-1: 0 1px 2px rgba(0,0,0,.34);
  --sh-2: 0 2px 6px rgba(0,0,0,.36), 0 8px 20px rgba(0,0,0,.30);
  --sh-3: 0 10px 26px rgba(0,0,0,.44), 0 28px 56px rgba(0,0,0,.34);
  --sh-4: 0 18px 38px rgba(0,0,0,.52), 0 44px 88px rgba(0,0,0,.44);
  --sh-focus: 0 0 0 3px var(--surface), 0 0 0 6px var(--accent);
}

:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }