/* winsorlabs design tokens — the one copy every app ships.
   Canonical source: build-an-app/assets/tokens.css in catjwin/claude-skills.
   Copy it unchanged to each frontend folder (src/web/public/, src/web/notes/…);
   never edit an app's copy. Names follow the design system's tokens/*.css.
   Tokens only: no resets, no components, no font or icon imports. */

:root{
/* --- ground: warm, nocturnal aubergine --- */
--bg:#0B0712;
--panel:#16101F;
--raised:#1E1630;
--line:#332248;
--line-strong:#4A3766;
--chrome:rgba(11,7,18,.94);         /* sticky header, tab bar, action bars (with --blur-chrome) */

/* --- ink --- */
--text:#F4EEF8;
--ink2:#E4DCEE;
--dim:#A99BBF;
--dim2:#8E7FA8;

/* --- violet: the primary action --- */
--primary:#8B45E8;
--primary-press:#6524C4;
--primary-tint:rgba(139,69,232,.22);
--primary-glow:rgba(139,69,232,.4);
--primary-light:#B78BFF;
--primary-ink:#E4D2FF;              /* text on --primary-tint: selected chips, segments */

/* --- pink: the app's own voice (prompts, its suggestions, its asks) --- */
--accent:#F58FCB;
--accent-light:#FFC2E4;
--accent-tint:rgba(245,143,203,.12);
--accent-line:rgba(245,143,203,.4);

/* --- neon cyan: live data. times, counts, temperatures, things measured --- */
--neon:#3DF0FF;
--neon-dim:#7FF5FF;
--neon-ink:#04131A;
--neon-tint:rgba(61,240,255,.12);
--neon-glow:rgba(61,240,255,.35);

/* --- cream: tickets and anything you'd hold in your hand --- */
--cream:#F7EFE2;
--cream-ink:#2A1533;
--cream-dim:#5C4C6B;
--cream-warn:#9A5B00;               /* a warning printed on a ticket */

/* --- semantic --- */
--good:#3DFFC0;
--good-tint:rgba(61,255,192,.12);
--warn:#FFC46B;
--warn-tint:rgba(255,196,107,.1);
--warn-line:rgba(255,196,107,.34);
--bad:#FF5C87;
--bad-tint:rgba(255,92,135,.12);
--bad-line:rgba(255,92,135,.45);
--bad-ink:#FFB0BE;

/* --- timing chain (travel): before the key time, the key time, after it --- */
--time-before:var(--neon);
--time-key:#A6FF6E;
--time-key-tint:rgba(166,255,110,.12);
--time-key-glow:rgba(166,255,110,.3);
--time-after:#CBA8FF;

/* --- health capture groups: one hue each --- */
--tone-symptom:var(--accent);
--tone-measure:var(--neon);
--tone-sleep:var(--primary-light);
--tone-medication:var(--good);
--tone-food:var(--warn);
--tone-work:#AEBBFF;

/* --- heat scale (health calendar): a day against your usual.
       green better, calm blue usual, amber → red worse. Each has its ink. --- */
--heat-clear:#3DFFC0;  --heat-clear-ink:#04140E;
--heat-better:#2FBF71; --heat-better-ink:#06140C;
--heat-usual:#7D86C4;  --heat-usual-ink:#0B0712;
--heat-1:#F2D46B;      --heat-1-ink:#1F1603;
--heat-2:#F2B447;      --heat-2-ink:#1F1603;
--heat-3:#F2874A;      --heat-3-ink:#1F0E02;
--heat-4:#EB5757;      --heat-4-ink:#FFFFFF;
--heat-logged:#6E6385;                /* outline: logged, nothing to score */

/* --- semantic aliases --- */
--surface-page:var(--bg);
--surface-card:var(--panel);
--surface-raised:var(--raised);
--surface-ticket:var(--cream);
--surface-hero:linear-gradient(150deg,#33165C,#1A1030);
--surface-data:linear-gradient(150deg,#241C3A,#1C1630);
--border-hairline:var(--line);
--border-hero:#6B34B8;
--text-body:var(--text);
--text-quiet:var(--dim);
--text-quietest:var(--dim2);
--text-data:var(--neon);
--text-voice:var(--accent);
--text-on-primary:#fff;
--text-on-neon:var(--neon-ink);
--text-on-ticket:var(--cream-ink);
--action-primary:var(--primary);
--action-primary-press:var(--primary-press);

/* --- type --- */
--font-display:"Bricolage Grotesque",system-ui,sans-serif;
--font-body:"DM Sans",system-ui,-apple-system,sans-serif;
--fw-regular:400;
--fw-medium:500;
--fw-bold:700;
--fw-black:800;
--text-display:1.9rem;
--text-title:1.3rem;
--text-heading:1.05rem;
--text-body-size:1rem;
--text-sm:.92rem;
--text-xs:.85rem;
--text-2xs:.78rem;
--text-label:.72rem;
--text-micro:.66rem;
--lh-tight:1.05;
--lh-snug:1.25;
--lh-body:1.55;
--track-display:-.02em;
--track-label:.14em;
--type-display:var(--fw-black) var(--text-display)/var(--lh-tight) var(--font-display);
--type-title:var(--fw-bold) var(--text-title)/var(--lh-snug) var(--font-display);
--type-heading:var(--fw-bold) var(--text-heading)/var(--lh-snug) var(--font-display);
--type-body:var(--fw-regular) var(--text-body-size)/var(--lh-body) var(--font-body);
--type-body-bold:var(--fw-bold) var(--text-sm)/var(--lh-snug) var(--font-body);
--type-label:var(--fw-bold) var(--text-label)/1.2 var(--font-body);

/* --- spacing --- */
--space-1:.2rem;
--space-2:.35rem;
--space-3:.5rem;
--space-4:.6rem;
--space-5:.7rem;
--space-6:.9rem;
--space-7:1.1rem;
--space-8:1.5rem;
--space-9:2rem;
--gap-row:.5rem;
--gap-field:.7rem;
--pad-card:.8rem .9rem;
--pad-hero:1rem 1.1rem;
--pad-screen:1.1rem;
--pad-header:.85rem 1rem;
--pad-button:.85rem;
--tap-min:44px;
--measure:40rem;

/* --- shape --- */
--radius-lg:22px;   /* sheets, data panels */
--radius:20px;      /* hero cards, banners */
--radius-md:16px;
--radius-sm:14px;   /* tickets, inputs, checks */
--radius-xs:12px;   /* list rows, chips-as-boxes */
--radius-pill:999px;
--border-hair:1px;
--border-input:1.5px;

/* --- depth is glow, not grey --- */
--shadow-hero:0 0 0 1px rgba(139,69,232,.25),0 10px 34px rgba(139,69,232,.28);
--shadow-halo:0 0 0 1.5px var(--primary),0 0 34px var(--primary-glow);   /* the item you just made */
--shadow-primary:0 8px 20px var(--primary-glow);
--shadow-neon:0 0 16px var(--neon-glow);
--shadow-ticket:0 8px 22px rgba(0,0,0,.32);
--shadow-float:0 10px 30px rgba(0,0,0,.4);                                 /* toast */
--glow-text-data:0 0 12px var(--neon-glow);
--inset-hairline:inset 0 1px 0 rgba(255,255,255,.05);
--blur-chrome:blur(10px);
--scrim:rgba(0,0,0,.55);

/* --- motion --- */
--ease:cubic-bezier(.2,.6,.2,1);
--dur-fast:.15s;
--dur:.18s;
--dur-slow:.4s;
--press-scale:.99;
--press-shift:translateY(1px);
--transition-button:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
--transition-chev:transform var(--dur) var(--ease);

/* --- icons --- */
--icon-sm:1rem;
--icon:1.25rem;
--icon-lg:1.7rem;

/* --- legacy names: older app CSS still uses these. Remove once nothing does. --- */
--r:var(--radius);
--r-lg:var(--radius-lg);
--r-md:var(--radius-md);
--r-sm:var(--radius-sm);
--r-xs:var(--radius-xs);
--r-pill:var(--radius-pill);
--display:var(--font-display);
--body:var(--font-body);
--t-before:var(--time-before);
--t-key:var(--time-key);
--t-after:var(--time-after);
}

@media (prefers-reduced-motion:reduce){:root{
--dur-fast:0s;
--dur:0s;
--dur-slow:0s;
}}