/* ============================================================================
   KIMO DESIGN SYSTEM — tokens.css   (single source of truth for design values)
   ----------------------------------------------------------------------------
   Link this FIRST, then base.css, in every kimo app:
     <link rel="stylesheet" href="/shared/tokens.css">
     <link rel="stylesheet" href="/shared/base.css">
   And set the app on <html>:  <html lang="en" data-app="insurance">
     data-app ∈ { insurance | family | finances | hub }  → picks the accent.

   Language: "Warm dense" — v2 density on v1's warm paper palette, restrained
   teal-family accents, hairline borders, soft elevation, serif display titles.

   THEME: follows the OS via prefers-color-scheme. Apps may set
     <html data-theme="light|dark"> to force a theme (persist in localStorage).

   ACCENTS ("emerald · lavender · lake" system): ONE tone, six hues. Every accent
     is oklch(L C H) with a SHARED L and C — only the hue changes per app, so warm
     and cool read as one family. Light L 50%, dark L 78%; the derived strong/weak/
     line tokens share the same recipe. Hues: family 150 (green) · insurance 182
     (teal, the :root default) · excursions 215 (lake cyan) · finances 262
     (periwinkle) · hub 315 (lavender) · coaching 350 (rose). To retune the whole
     suite, change L or C once. To add an app, add a data-app block with a new hue.
============================================================================ */

/* ---- Figtree (self-hosted variable font; friendly geometric sans) ----------
   Single variable file per subset covers weights 300–900. Latin + latin-ext
   (German umlauts). font-display:swap so text paints immediately. */
@font-face{
  font-family:"Figtree";
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url("/shared/fonts/figtree-latin-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Figtree";
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url("/shared/fonts/figtree-latinext-var.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  color-scheme: light dark;

  /* ---- accent: DEFAULT = insurance teal (light) ---- */
  --accent:oklch(50% .105 182); --accent-strong:oklch(41% .097 182); --accent-weak:oklch(95.5% .03 182); --accent-line:oklch(86% .05 182); --accent-text:oklch(41% .097 182);

  /* ---- cool neutral surfaces (light) — Apple-style near-whites ---- */
  --bg-0:#f5f5f7; --bg-1:#ffffff; --bg-2:#ececef; --bg-3:#e2e2e7;
  --bd:#e4e4e9; --bd-strong:#d3d3da;

  /* ---- sidebar rail (cool near-black, light) ---- */
  --rail:#1d1d1f; --rail-2:#2c2c2e; --rail-3:#3a3a3c; --rail-text:#a1a1a6; --rail-text-strong:#f5f5f7;

  /* ---- text: cool near-black ink ---- */
  --tx-0:#1d1d1f; --tx-1:#515154; --tx-2:#86868b; --tx-inv:#ffffff;

  /* ---- status (cool-tuned) ---- */
  --red:#c9342b; --red-bg:#fbeceb; --red-line:#f0c8c4;
  --amber:#946409; --amber-bg:#f7efdd; --amber-line:#e6d3a6;
  --blue:#3f68a8; --blue-bg:#e9eef6;
  --slate:#5a6472; --slate-bg:#eaecf0;
  --grey:#7a7a82; --grey-bg:#ededf1;
  --green:#1a8a4f; --green-bg:#e4f4ea;   /* semantic positive/success (distinct from accent) */
  --green-ok:var(--accent);

  /* ---- fluid spacing scale (airier) ---- */
  --s1:clamp(.3rem,.26rem + .18vw,.4rem);
  --s2:clamp(.5rem,.43rem + .32vw,.68rem);
  --s3:clamp(.75rem,.62rem + .5vw,1.05rem);
  --s4:clamp(1rem,.82rem + .72vw,1.4rem);
  --s5:clamp(1.4rem,1.1rem + 1.15vw,2rem);
  --s6:clamp(2rem,1.5rem + 1.9vw,3rem);

  /* ---- fluid type scale (larger, breathable) ---- */
  --t-xs:clamp(.72rem,.69rem + .12vw,.8rem);
  --t-sm:clamp(.82rem,.79rem + .14vw,.9rem);
  --t-base:clamp(.94rem,.9rem + .18vw,1.02rem);
  --t-md:clamp(1.05rem,.99rem + .3vw,1.2rem);
  --t-lg:clamp(1.25rem,1.1rem + .65vw,1.6rem);
  --t-xl:clamp(1.7rem,1.35rem + 1.7vw,2.6rem);

  /* ---- soft, large radii (Apple/YNAB) ---- */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px;
  --shadow:0 1px 2px rgba(20,20,35,.05),0 1px 3px rgba(20,20,35,.04);
  --shadow-pop:0 2px 8px rgba(20,20,35,.06),0 24px 56px -20px rgba(20,20,45,.26);

  --font:"Figtree",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Figtree",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --rail-w:240px;
  --dur:.16s;
}

/* ---- per-app accents (light) — the harmonized cool ramp ---- */
[data-app="family"]  {--accent:oklch(50% .105 150); --accent-strong:oklch(41% .097 150); --accent-weak:oklch(95.5% .03 150); --accent-line:oklch(86% .05 150); --accent-text:oklch(41% .097 150);}
[data-app="hub"]     {--accent:oklch(50% .105 315); --accent-strong:oklch(41% .097 315); --accent-weak:oklch(95.5% .03 315); --accent-line:oklch(86% .05 315); --accent-text:oklch(41% .097 315);}
[data-app="finances"]{--accent:oklch(50% .105 262); --accent-strong:oklch(41% .097 262); --accent-weak:oklch(95.5% .03 262); --accent-line:oklch(86% .05 262); --accent-text:oklch(41% .097 262);}
/* excursions: lake cyan — airy water tone for the "out & about" app */
[data-app="excursions"]{--accent:oklch(50% .105 215); --accent-strong:oklch(41% .097 215); --accent-weak:oklch(95.5% .03 215); --accent-line:oklch(86% .05 215); --accent-text:oklch(41% .097 215);}
/* coaching: dusty rose */
[data-app="coaching"]{--accent:oklch(50% .105 350); --accent-strong:oklch(41% .097 350); --accent-weak:oklch(95.5% .03 350); --accent-line:oklch(86% .05 350); --accent-text:oklch(41% .097 350);}
/* photography: warm brass/amber — the one gold hue (its own app lives at /photography, a bespoke dark guide; this drives the hub card) */
[data-app="photography"]{--accent:oklch(50% .105 75); --accent-strong:oklch(41% .097 75); --accent-weak:oklch(95.5% .03 75); --accent-line:oklch(86% .05 75); --accent-text:oklch(41% .097 75);}
/* travel: clay/terracotta — the warm end of the ramp, clear of photography's brass */
[data-app="travel"]{--accent:oklch(50% .105 30); --accent-strong:oklch(41% .097 30); --accent-weak:oklch(95.5% .03 30); --accent-line:oklch(86% .05 30); --accent-text:oklch(41% .097 30);}
/* eliane: same warm brass hue — continues the CRM's editorial brass identity (consumed as a synced copy in the eliane-crm repo) */
[data-app="eliane"]{--accent:oklch(50% .105 75); --accent-strong:oklch(41% .097 75); --accent-weak:oklch(95.5% .03 75); --accent-line:oklch(86% .05 75); --accent-text:oklch(41% .097 75);}
/* coach + portal: coaching rose — the kimo-coach repo's two apps (synced copies; other origin) */
[data-app="coach"],[data-app="portal"]{--accent:oklch(50% .105 350); --accent-strong:oklch(41% .097 350); --accent-weak:oklch(95.5% .03 350); --accent-line:oklch(86% .05 350); --accent-text:oklch(41% .097 350);}

/* ============================ DARK (system) ============================ */
@media (prefers-color-scheme: dark){
  :root{
    --accent:oklch(78% .115 182); --accent-strong:oklch(85% .097 182); --accent-weak:oklch(30% .045 182); --accent-line:oklch(45% .06 182); --accent-text:oklch(85% .097 182);
    --bg-0:#000000; --bg-1:#1c1c1e; --bg-2:#2c2c2e; --bg-3:#3a3a3c; --bd:#2e2e30; --bd-strong:#3f3f42;
    --rail:#141416; --rail-2:#242426; --rail-3:#323234; --rail-text:#98989d; --rail-text-strong:#f5f5f7;
    --tx-0:#f5f5f7; --tx-1:#aeaeb2; --tx-2:#86868b; --tx-inv:#000000;
    --red:#ff6b60; --red-bg:#2a1917; --red-line:#5a2a26;
    --amber:#e0a94f; --amber-bg:#2a2015; --amber-line:#514016;
    --blue:#8fb0e8; --blue-bg:#1a2233; --slate:#9aa4b2; --slate-bg:#1e2228;
    --grey:#a1a1a8; --grey-bg:#242426; --green:#4fd08a; --green-bg:#12271b; --green-ok:var(--accent);
    --shadow:0 1px 2px rgba(0,0,0,.4);
    --shadow-pop:0 2px 10px rgba(0,0,0,.5),0 28px 64px -24px rgba(0,0,0,.9);
  }
  [data-app="family"]  {--accent:oklch(78% .115 150); --accent-strong:oklch(85% .097 150); --accent-weak:oklch(30% .045 150); --accent-line:oklch(45% .06 150); --accent-text:oklch(85% .097 150);}
  [data-app="hub"]     {--accent:oklch(78% .115 315); --accent-strong:oklch(85% .097 315); --accent-weak:oklch(30% .045 315); --accent-line:oklch(45% .06 315); --accent-text:oklch(85% .097 315);}
  [data-app="finances"]{--accent:oklch(78% .115 262); --accent-strong:oklch(85% .097 262); --accent-weak:oklch(30% .045 262); --accent-line:oklch(45% .06 262); --accent-text:oklch(85% .097 262);}
  [data-app="excursions"]{--accent:oklch(78% .115 215); --accent-strong:oklch(85% .097 215); --accent-weak:oklch(30% .045 215); --accent-line:oklch(45% .06 215); --accent-text:oklch(85% .097 215);}
  [data-app="coaching"]{--accent:oklch(78% .115 350); --accent-strong:oklch(85% .097 350); --accent-weak:oklch(30% .045 350); --accent-line:oklch(45% .06 350); --accent-text:oklch(85% .097 350);}
  [data-app="photography"]{--accent:oklch(78% .115 75); --accent-strong:oklch(85% .097 75); --accent-weak:oklch(30% .045 75); --accent-line:oklch(45% .06 75); --accent-text:oklch(85% .097 75);}
  [data-app="travel"]{--accent:oklch(78% .115 30); --accent-strong:oklch(85% .097 30); --accent-weak:oklch(30% .045 30); --accent-line:oklch(45% .06 30); --accent-text:oklch(85% .097 30);}
  [data-app="eliane"]{--accent:oklch(78% .115 75); --accent-strong:oklch(85% .097 75); --accent-weak:oklch(30% .045 75); --accent-line:oklch(45% .06 75); --accent-text:oklch(85% .097 75);}
  [data-app="coach"],[data-app="portal"]{--accent:oklch(78% .115 350); --accent-strong:oklch(85% .097 350); --accent-weak:oklch(30% .045 350); --accent-line:oklch(45% .06 350); --accent-text:oklch(85% .097 350);}
}

/* ============================ MANUAL LIGHT ============================ */
html[data-theme="light"]{
  color-scheme:light;
  --accent:oklch(50% .105 182); --accent-strong:oklch(41% .097 182); --accent-weak:oklch(95.5% .03 182); --accent-line:oklch(86% .05 182); --accent-text:oklch(41% .097 182);
  --bg-0:#f5f5f7; --bg-1:#ffffff; --bg-2:#ececef; --bg-3:#e2e2e7; --bd:#e4e4e9; --bd-strong:#d3d3da;
  --rail:#1d1d1f; --rail-2:#2c2c2e; --rail-3:#3a3a3c; --rail-text:#a1a1a6; --rail-text-strong:#f5f5f7;
  --tx-0:#1d1d1f; --tx-1:#515154; --tx-2:#86868b; --tx-inv:#ffffff;
  --red:#c9342b; --red-bg:#fbeceb; --red-line:#f0c8c4; --amber:#946409; --amber-bg:#f7efdd; --amber-line:#e6d3a6;
  --blue:#3f68a8; --blue-bg:#e9eef6; --slate:#5a6472; --slate-bg:#eaecf0; --grey:#7a7a82; --grey-bg:#ededf1; --green:#1a8a4f; --green-bg:#e4f4ea;
  --shadow:0 1px 2px rgba(20,20,35,.05),0 1px 3px rgba(20,20,35,.04); --shadow-pop:0 2px 8px rgba(20,20,35,.06),0 24px 56px -20px rgba(20,20,45,.26);
}
html[data-theme="light"][data-app="family"]  {--accent:oklch(50% .105 150); --accent-strong:oklch(41% .097 150); --accent-weak:oklch(95.5% .03 150); --accent-line:oklch(86% .05 150); --accent-text:oklch(41% .097 150);}
html[data-theme="light"][data-app="hub"]     {--accent:oklch(50% .105 315); --accent-strong:oklch(41% .097 315); --accent-weak:oklch(95.5% .03 315); --accent-line:oklch(86% .05 315); --accent-text:oklch(41% .097 315);}
html[data-theme="light"][data-app="finances"]{--accent:oklch(50% .105 262); --accent-strong:oklch(41% .097 262); --accent-weak:oklch(95.5% .03 262); --accent-line:oklch(86% .05 262); --accent-text:oklch(41% .097 262);}
html[data-theme="light"][data-app="excursions"]{--accent:oklch(50% .105 215); --accent-strong:oklch(41% .097 215); --accent-weak:oklch(95.5% .03 215); --accent-line:oklch(86% .05 215); --accent-text:oklch(41% .097 215);}
html[data-theme="light"][data-app="coaching"]{--accent:oklch(50% .105 350); --accent-strong:oklch(41% .097 350); --accent-weak:oklch(95.5% .03 350); --accent-line:oklch(86% .05 350); --accent-text:oklch(41% .097 350);}
html[data-theme="light"][data-app="photography"]{--accent:oklch(50% .105 75); --accent-strong:oklch(41% .097 75); --accent-weak:oklch(95.5% .03 75); --accent-line:oklch(86% .05 75); --accent-text:oklch(41% .097 75);}
html[data-theme="light"][data-app="travel"]{--accent:oklch(50% .105 30); --accent-strong:oklch(41% .097 30); --accent-weak:oklch(95.5% .03 30); --accent-line:oklch(86% .05 30); --accent-text:oklch(41% .097 30);}
html[data-theme="light"][data-app="eliane"]{--accent:oklch(50% .105 75); --accent-strong:oklch(41% .097 75); --accent-weak:oklch(95.5% .03 75); --accent-line:oklch(86% .05 75); --accent-text:oklch(41% .097 75);}
html[data-theme="light"][data-app="coach"],html[data-theme="light"][data-app="portal"]{--accent:oklch(50% .105 350); --accent-strong:oklch(41% .097 350); --accent-weak:oklch(95.5% .03 350); --accent-line:oklch(86% .05 350); --accent-text:oklch(41% .097 350);}

/* ============================ MANUAL DARK ============================ */
html[data-theme="dark"]{
  color-scheme:dark;
  --accent:oklch(78% .115 182); --accent-strong:oklch(85% .097 182); --accent-weak:oklch(30% .045 182); --accent-line:oklch(45% .06 182); --accent-text:oklch(85% .097 182);
  --bg-0:#000000; --bg-1:#1c1c1e; --bg-2:#2c2c2e; --bg-3:#3a3a3c; --bd:#2e2e30; --bd-strong:#3f3f42;
  --rail:#141416; --rail-2:#242426; --rail-3:#323234; --rail-text:#98989d; --rail-text-strong:#f5f5f7;
  --tx-0:#f5f5f7; --tx-1:#aeaeb2; --tx-2:#86868b; --tx-inv:#000000;
  --red:#ff6b60; --red-bg:#2a1917; --red-line:#5a2a26; --amber:#e0a94f; --amber-bg:#2a2015; --amber-line:#514016;
  --blue:#8fb0e8; --blue-bg:#1a2233; --slate:#9aa4b2; --slate-bg:#1e2228; --grey:#a1a1a8; --grey-bg:#242426; --green:#4fd08a; --green-bg:#12271b;
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-pop:0 2px 10px rgba(0,0,0,.5),0 28px 64px -24px rgba(0,0,0,.9);
}
html[data-theme="dark"][data-app="family"]  {--accent:oklch(78% .115 150); --accent-strong:oklch(85% .097 150); --accent-weak:oklch(30% .045 150); --accent-line:oklch(45% .06 150); --accent-text:oklch(85% .097 150);}
html[data-theme="dark"][data-app="hub"]     {--accent:oklch(78% .115 315); --accent-strong:oklch(85% .097 315); --accent-weak:oklch(30% .045 315); --accent-line:oklch(45% .06 315); --accent-text:oklch(85% .097 315);}
html[data-theme="dark"][data-app="finances"]{--accent:oklch(78% .115 262); --accent-strong:oklch(85% .097 262); --accent-weak:oklch(30% .045 262); --accent-line:oklch(45% .06 262); --accent-text:oklch(85% .097 262);}
html[data-theme="dark"][data-app="excursions"]{--accent:oklch(78% .115 215); --accent-strong:oklch(85% .097 215); --accent-weak:oklch(30% .045 215); --accent-line:oklch(45% .06 215); --accent-text:oklch(85% .097 215);}
html[data-theme="dark"][data-app="coaching"]{--accent:oklch(78% .115 350); --accent-strong:oklch(85% .097 350); --accent-weak:oklch(30% .045 350); --accent-line:oklch(45% .06 350); --accent-text:oklch(85% .097 350);}
html[data-theme="dark"][data-app="photography"]{--accent:oklch(78% .115 75); --accent-strong:oklch(85% .097 75); --accent-weak:oklch(30% .045 75); --accent-line:oklch(45% .06 75); --accent-text:oklch(85% .097 75);}
html[data-theme="dark"][data-app="travel"]{--accent:oklch(78% .115 30); --accent-strong:oklch(85% .097 30); --accent-weak:oklch(30% .045 30); --accent-line:oklch(45% .06 30); --accent-text:oklch(85% .097 30);}
html[data-theme="dark"][data-app="eliane"]{--accent:oklch(78% .115 75); --accent-strong:oklch(85% .097 75); --accent-weak:oklch(30% .045 75); --accent-line:oklch(45% .06 75); --accent-text:oklch(85% .097 75);}
html[data-theme="dark"][data-app="coach"],html[data-theme="dark"][data-app="portal"]{--accent:oklch(78% .115 350); --accent-strong:oklch(85% .097 350); --accent-weak:oklch(30% .045 350); --accent-line:oklch(45% .06 350); --accent-text:oklch(85% .097 350);}