/* C331 — design tokens. Dark critical is lightened so text stays readable on dark surfaces. */
  :root{
    /* CaleFat Design System v1.0 — semantic tokens (hex map Clear Cut until asset QA) */
    --cf-space-1:4px;--cf-space-2:8px;--cf-space-3:12px;--cf-space-4:16px;
    --cf-space-6:24px;--cf-space-8:32px;--cf-space-12:48px;
    --cf-screen-x:20px;
    --cf-display:40px;--cf-display-lh:44px;
    --cf-h1:28px;--cf-h1-lh:34px;
    --cf-h2:20px;--cf-h2-lh:26px;
    --cf-h3:17px;--cf-h3-lh:23px;
    --cf-body-lg:16px;--cf-body-lg-lh:24px;
    --cf-body:15px;--cf-body-lh:22px;
    --cf-small:14px;--cf-small-lh:20px;
    --cf-caption:12px;--cf-caption-lh:17px;
    --cf-weight-regular:400;--cf-weight-medium:500;--cf-weight-semibold:600;--cf-weight-bold:700;
    --cf-radius-control:12px;--cf-radius-surface:16px;--cf-radius-cal:20px;--cf-radius-sheet:24px;--cf-radius-pill:999px;
    --cf-elev-0:none;--cf-elev-1:0 1px 0 rgba(18,26,22,.06);--cf-elev-2:0 8px 28px rgba(18,26,22,.14);
    --cf-surface-canvas:#F7F5F1;
    --cf-surface-primary:#FFFFFF;
    --cf-surface-subtle:#F0EEE9;
    --cf-surface-cal:#F3F8F5;
    --cf-text-primary:#121A16;
    --cf-text-secondary:#3D4A43;
    --cf-text-tertiary:#5F6E66;
    --cf-text-inverse:#FFFFFF;
    --cf-brand-primary:#1B8A5A;
    --cf-brand-soft:#E6F5EE;
    --cf-brand-pressed:#157248;
    --cf-brand-focus:#1B8A5A;
    /* C248: Green roles — same Clear Cut hex, separate meaning */
    --cf-action:var(--cf-brand-primary);
    --cf-action-pressed:var(--cf-brand-pressed);
    --cf-semantic-positive:#1B8A5A;
    --cf-semantic-attention:#C47E0A;
    --cf-semantic-critical:#C43C2C;
    --cf-semantic-info:#3D6B8A;
    --cf-semantic-warning:#C2621B;
    --cf-semantic-negative:var(--cf-semantic-critical);
    /* Status tints: soft bg · line · ink (AA on soft) — theme-aware, no off-brand Tailwind hex */
    --cf-positive-soft:#E6F5EE;--cf-positive-line:#B7E0C8;--cf-positive-ink:#14663F;
    --cf-attention-soft:#FBF3E0;--cf-attention-line:#E8D4A8;--cf-attention-ink:#7A5A12;
    --cf-critical-soft:#FBEAE7;--cf-critical-line:#F2C9C2;--cf-critical-ink:#A3301F;
    /* Data viz: eat vs move vs track — one palette across Today / Diary / Trends */
    --cf-data-eat:#E08A2A;--cf-data-eat-soft:#EFC48A;--cf-data-move:#3D6B8A;--cf-data-track:#E5ECE8;
    /* RGB triplets for alpha tints (rgba(var(--x),a)) — works on older LINE WebViews */
    --cf-brand-rgb:27,138,90;--cf-border-rgb:226,224,218;--cf-critical-rgb:196,60,44;
    --cf-warning-rgb:194,98,27;--cf-attention-rgb:122,90,18;--cf-canvas-rgb:247,245,241;
    --cf-motion:220ms;

    --brand-primary:var(--cf-brand-primary);
    --brand-primary-hover:var(--cf-brand-pressed);
    --brand-primary-soft:var(--cf-brand-soft);
    --page-bg:var(--cf-surface-canvas);
    --page-bg-accent:var(--cf-surface-subtle);
    --surface:var(--cf-surface-primary);
    --surface-muted:var(--cf-surface-subtle);
    --surface-2:var(--cf-surface-subtle);
    --card-surface:var(--cf-surface-primary);
    --border:#E2E0DA;
    --border-strong:#9BB5A6;
    --ink:var(--cf-text-primary);
    --ink-secondary:var(--cf-text-secondary);
    --ink-muted:var(--cf-text-tertiary);
    --text-primary:var(--ink);
    --text-secondary:var(--ink-secondary);
    --text-muted:var(--ink-muted);
    --green:var(--cf-semantic-positive);
    --yellow:var(--cf-semantic-attention);
    --red:var(--cf-semantic-critical);
    --radius:var(--cf-radius-control);
    --accent:var(--brand-primary);
    --glass:rgba(255,255,255,.72);
    --glass-strong:rgba(255,255,255,.85);
    --glass-bar:rgba(255,255,255,.65);
    --nav-bg:rgba(255,255,255,.94);
    --nav-border:rgba(226,224,218,.85);
    --overlay:rgba(18,26,22,.45);
    --shadow-ink:rgba(18,26,22,.06);
    color-scheme:light;
  }
  html[data-theme="dark"]{
    color-scheme:dark;
    --cf-surface-canvas:#0F1A14;
    --cf-surface-primary:#1A2620;
    --cf-surface-subtle:#24302A;
    --cf-surface-cal:#1A2E24;
    --cf-text-primary:#E8F0EB;
    /* S9: secondary/tertiary AA on canvas/surface; inverse is dark ink on bright brand CTA */
    --cf-text-secondary:#B7C7BF;
    --cf-text-tertiary:#A3B5AC;
    --cf-text-inverse:#0F1A14;
    --cf-brand-primary:#3DCF8A;
    --cf-brand-soft:#1A3D2C;
    --cf-brand-pressed:#2BB872;
    --cf-action:var(--cf-brand-primary);
    --cf-action-pressed:var(--cf-brand-pressed);
    --cf-semantic-positive:#3DCF8A;
    --cf-semantic-attention:#E0A84A;
    --cf-semantic-critical:#F3A097;
    --cf-semantic-warning:#F08A4B;
    --cf-positive-soft:#1A3D2C;--cf-positive-line:#2A5A42;--cf-positive-ink:#7FE3B2;
    --cf-attention-soft:#3A2E14;--cf-attention-line:#5A4620;--cf-attention-ink:#F0C878;
    --cf-critical-soft:#3D1F1C;--cf-critical-line:#5C2E29;--cf-critical-ink:#F59A8E;
    --cf-data-eat:#F0A050;--cf-data-eat-soft:#A87A35;--cf-data-move:#6FA3C7;--cf-data-track:#2A3830;
    --cf-brand-rgb:61,207,138;--cf-border-rgb:46,64,56;--cf-critical-rgb:232,90,90;
    --cf-warning-rgb:240,138,75;--cf-attention-rgb:240,200,120;--cf-canvas-rgb:15,26,20;
    --brand-primary:var(--cf-brand-primary);
    --brand-primary-hover:var(--cf-brand-pressed);
    --brand-primary-soft:var(--cf-brand-soft);
    --page-bg:var(--cf-surface-canvas);
    --page-bg-accent:var(--cf-surface-subtle);
    --surface:var(--cf-surface-primary);
    --surface-muted:var(--cf-surface-subtle);
    --surface-2:var(--cf-surface-subtle);
    --card-surface:var(--cf-surface-primary);
    --border:#2E4038;
    --border-strong:#3D564A;
    --ink:var(--cf-text-primary);
    --ink-secondary:var(--cf-text-secondary);
    --ink-muted:var(--cf-text-tertiary);
    --text-primary:var(--ink);
    --text-secondary:var(--ink-secondary);
    --text-muted:var(--ink-muted);
    --green:var(--cf-semantic-positive);
    --yellow:var(--cf-semantic-attention);
    --red:var(--cf-semantic-critical);
    --accent:var(--brand-primary);
    --glass:rgba(26,38,32,.78);
    --glass-strong:rgba(26,38,32,.9);
    --glass-bar:rgba(36,48,42,.7);
    --nav-bg:rgba(15,26,20,.94);
    --nav-border:rgba(46,64,56,.8);
    --overlay:rgba(0,0,0,.55);
    --shadow-ink:rgba(0,0,0,.25);
    --cf-elev-1:0 1px 0 rgba(0,0,0,.2);
    --cf-elev-2:0 8px 28px rgba(0,0,0,.4);
  }