/* ============================================================================
KIMO DESIGN SYSTEM — tokens.css (single source of truth for design values)
----------------------------------------------------------------------------
Link this FIRST, then base.css, in every kimo app:
And set the app on :
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
to force a theme (persist in localStorage).
ACCENTS: one muted-saturation ramp across the cool spectrum, one hue per app —
family green → insurance teal → hub teal-cyan → finances blue-teal.
Each is a single overridable --accent (+ strong/weak/line/text), with a
brightened dark-theme counterpart. To add an app, add a data-app block here.
============================================================================ */
:root{
color-scheme: light dark;
/* ---- accent: DEFAULT = insurance teal (light) ---- */
--accent:#0f8378; --accent-strong:#0c5d55; --accent-weak:#e7f1ee; --accent-line:#bcdcd5; --accent-text:#0c5d55;
/* ---- warm paper surfaces (light) ---- */
--bg-0:#f7f5f0; --bg-1:#fffefb; --bg-2:#f1eee7; --bg-3:#e9e5db;
--bd:#e6e2d8; --bd-strong:#d6d1c4;
/* ---- sidebar rail (warm deep teal-charcoal, light) ---- */
--rail:#1f2b28; --rail-2:#2a3835; --rail-3:#37433f; --rail-text:#9caea9; --rail-text-strong:#f1efe9;
/* ---- text: warm near-black ink ---- */
--tx-0:#22231f; --tx-1:#56564f; --tx-2:#8a8a80; --tx-inv:#fffefb;
/* ---- status (warm-tuned for paper) ---- */
--red:#b4443c; --red-bg:#f7e8e6; --red-line:#e4c2bd;
--amber:#9a6a13; --amber-bg:#f4ecda; --amber-line:#e0cda0;
--blue:#4d6678; --blue-bg:#e7edf1;
--slate:#4d6678; --slate-bg:#e7edf1;
--grey:#7c7c72; --grey-bg:#eeece5;
--green:#1f8a5a; --green-bg:#e6f3ec; /* semantic positive/success (distinct from accent) */
--green-ok:var(--accent);
/* ---- fluid spacing scale ---- */
--s1:clamp(.25rem,.2rem + .2vw,.35rem);
--s2:clamp(.4rem,.34rem + .3vw,.55rem);
--s3:clamp(.6rem,.5rem + .4vw,.8rem);
--s4:clamp(.85rem,.7rem + .6vw,1.1rem);
--s5:clamp(1.1rem,.9rem + .9vw,1.5rem);
--s6:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);
/* ---- fluid type scale (tight/dense) ---- */
--t-xs:clamp(.66rem,.64rem + .08vw,.72rem);
--t-sm:clamp(.76rem,.74rem + .1vw,.82rem);
--t-base:clamp(.82rem,.8rem + .12vw,.9rem);
--t-md:clamp(.92rem,.88rem + .2vw,1.02rem);
--t-lg:clamp(1.05rem,.98rem + .4vw,1.25rem);
--t-xl:clamp(1.3rem,1.15rem + .8vw,1.75rem);
--r-sm:4px; --r-md:7px; --r-lg:10px;
--shadow:0 1px 2px rgba(40,38,30,.04);
--shadow-pop:0 1px 2px rgba(40,38,30,.05),0 24px 60px -28px rgba(40,38,30,.4);
--font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--font-display:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
--rail-w:236px;
--dur:.16s;
}
/* ---- per-app accents (light) — the harmonized cool ramp ---- */
[data-app="family"] {--accent:#1f7a5a; --accent-strong:#155c43; --accent-weak:#e8f1ec; --accent-line:#bcd9c8; --accent-text:#155c43;}
[data-app="hub"] {--accent:#12827b; --accent-strong:#0c5f5a; --accent-weak:#e6f1ef; --accent-line:#b8dad5; --accent-text:#0c5f5a;}
[data-app="finances"]{--accent:#1f6f8c; --accent-strong:#16566c; --accent-weak:#e7eef2; --accent-line:#b9d2dd; --accent-text:#16566c;}
/* excursions: warm clay/terracotta — the one warm hue, signalling the "out & about" app */
[data-app="excursions"]{--accent:#b06a3c; --accent-strong:#8a4f2a; --accent-weak:#f4ebe2; --accent-line:#e2c8ac; --accent-text:#8a4f2a;}
/* coaching: berry/rose — distinct warm hue for the workout-coaching app */
[data-app="coaching"]{--accent:#a8476a; --accent-strong:#863a56; --accent-weak:#f6e9ee; --accent-line:#e7c4d2; --accent-text:#863a56;}
/* ============================ DARK (system) ============================ */
@media (prefers-color-scheme: dark){
:root{
--accent:#5ec8bb; --accent-strong:#7ed6cb; --accent-weak:#1f322f; --accent-line:#2f4f4a; --accent-text:#7ed6cb;
--bg-0:#1a1916; --bg-1:#211f1b; --bg-2:#2a2823; --bg-3:#332f29; --bd:#34322c; --bd-strong:#403d35;
--rail:#15140f; --rail-2:#211f19; --rail-3:#2d2a23; --rail-text:#9a968a; --rail-text-strong:#f1efe9;
--tx-0:#ece9e1; --tx-1:#b3afa4; --tx-2:#85816f; --tx-inv:#1a1916;
--red:#e08a82; --red-bg:#352321; --red-line:#5a3733;
--amber:#d9aa5c; --amber-bg:#33291a; --amber-line:#574716;
--blue:#9cb4c4; --blue-bg:#222b31; --slate:#9cb4c4; --slate-bg:#222b31;
--grey:#a7a497; --grey-bg:#2b2922; --green:#5ec89e; --green-bg:#1c2f27; --green-ok:var(--accent);
--shadow:0 1px 2px rgba(0,0,0,.3);
--shadow-pop:0 1px 2px rgba(0,0,0,.4),0 28px 64px -28px rgba(0,0,0,.85);
}
[data-app="family"] {--accent:#5ec89e; --accent-strong:#80d6b4; --accent-weak:#1c2f27; --accent-line:#2f4f40; --accent-text:#80d6b4;}
[data-app="hub"] {--accent:#5ec8c4; --accent-strong:#80d6d2; --accent-weak:#1c302f; --accent-line:#2e4e4b; --accent-text:#80d6d2;}
[data-app="finances"]{--accent:#5fbcd8; --accent-strong:#82cee4; --accent-weak:#1b2b31; --accent-line:#2c4651; --accent-text:#82cee4;}
[data-app="excursions"]{--accent:#d6996a; --accent-strong:#e3b287; --accent-weak:#43301e; --accent-line:#4d3e30; --accent-text:#e3b287;}
[data-app="coaching"]{--accent:#e08aa6; --accent-strong:#eaa6bc; --accent-weak:#3a2029; --accent-line:#4f2f3a; --accent-text:#eaa6bc;}
}
/* ============================ MANUAL LIGHT ============================ */
html[data-theme="light"]{
color-scheme:light;
--accent:#0f8378; --accent-strong:#0c5d55; --accent-weak:#e7f1ee; --accent-line:#bcdcd5; --accent-text:#0c5d55;
--bg-0:#f7f5f0; --bg-1:#fffefb; --bg-2:#f1eee7; --bg-3:#e9e5db; --bd:#e6e2d8; --bd-strong:#d6d1c4;
--rail:#1f2b28; --rail-2:#2a3835; --rail-3:#37433f; --rail-text:#9caea9; --rail-text-strong:#f1efe9;
--tx-0:#22231f; --tx-1:#56564f; --tx-2:#8a8a80; --tx-inv:#fffefb;
--red:#b4443c; --red-bg:#f7e8e6; --red-line:#e4c2bd; --amber:#9a6a13; --amber-bg:#f4ecda; --amber-line:#e0cda0;
--blue:#4d6678; --blue-bg:#e7edf1; --slate:#4d6678; --slate-bg:#e7edf1; --grey:#7c7c72; --grey-bg:#eeece5; --green:#1f8a5a; --green-bg:#e6f3ec;
--shadow:0 1px 2px rgba(40,38,30,.04); --shadow-pop:0 1px 2px rgba(40,38,30,.05),0 24px 60px -28px rgba(40,38,30,.4);
}
html[data-theme="light"][data-app="family"] {--accent:#1f7a5a; --accent-strong:#155c43; --accent-weak:#e8f1ec; --accent-line:#bcd9c8; --accent-text:#155c43;}
html[data-theme="light"][data-app="hub"] {--accent:#12827b; --accent-strong:#0c5f5a; --accent-weak:#e6f1ef; --accent-line:#b8dad5; --accent-text:#0c5f5a;}
html[data-theme="light"][data-app="finances"]{--accent:#1f6f8c; --accent-strong:#16566c; --accent-weak:#e7eef2; --accent-line:#b9d2dd; --accent-text:#16566c;}
html[data-theme="light"][data-app="excursions"]{--accent:#b06a3c; --accent-strong:#8a4f2a; --accent-weak:#f4ebe2; --accent-line:#e2c8ac; --accent-text:#8a4f2a;}
html[data-theme="light"][data-app="coaching"]{--accent:#a8476a; --accent-strong:#863a56; --accent-weak:#f6e9ee; --accent-line:#e7c4d2; --accent-text:#863a56;}
/* ============================ MANUAL DARK ============================ */
html[data-theme="dark"]{
color-scheme:dark;
--accent:#5ec8bb; --accent-strong:#7ed6cb; --accent-weak:#1f322f; --accent-line:#2f4f4a; --accent-text:#7ed6cb;
--bg-0:#1a1916; --bg-1:#211f1b; --bg-2:#2a2823; --bg-3:#332f29; --bd:#34322c; --bd-strong:#403d35;
--rail:#15140f; --rail-2:#211f19; --rail-3:#2d2a23; --rail-text:#9a968a; --rail-text-strong:#f1efe9;
--tx-0:#ece9e1; --tx-1:#b3afa4; --tx-2:#85816f; --tx-inv:#1a1916;
--red:#e08a82; --red-bg:#352321; --red-line:#5a3733; --amber:#d9aa5c; --amber-bg:#33291a; --amber-line:#574716;
--blue:#9cb4c4; --blue-bg:#222b31; --slate:#9cb4c4; --slate-bg:#222b31; --grey:#a7a497; --grey-bg:#2b2922; --green:#5ec89e; --green-bg:#1c2f27;
--shadow:0 1px 2px rgba(0,0,0,.3); --shadow-pop:0 1px 2px rgba(0,0,0,.4),0 28px 64px -28px rgba(0,0,0,.85);
}
html[data-theme="dark"][data-app="family"] {--accent:#5ec89e; --accent-strong:#80d6b4; --accent-weak:#1c2f27; --accent-line:#2f4f40; --accent-text:#80d6b4;}
html[data-theme="dark"][data-app="hub"] {--accent:#5ec8c4; --accent-strong:#80d6d2; --accent-weak:#1c302f; --accent-line:#2e4e4b; --accent-text:#80d6d2;}
html[data-theme="dark"][data-app="finances"]{--accent:#5fbcd8; --accent-strong:#82cee4; --accent-weak:#1b2b31; --accent-line:#2c4651; --accent-text:#82cee4;}
html[data-theme="dark"][data-app="excursions"]{--accent:#d6996a; --accent-strong:#e3b287; --accent-weak:#43301e; --accent-line:#4d3e30; --accent-text:#e3b287;}
html[data-theme="dark"][data-app="coaching"]{--accent:#e08aa6; --accent-strong:#eaa6bc; --accent-weak:#3a2029; --accent-line:#4f2f3a; --accent-text:#eaa6bc;}