/*
  GANZ · tokens.css
  Every design value used by the v1 screens, as CSS variables.
  Source: the v1 screen files in this export (Claude Design version 93). The screens themselves still carry
  the raw values; map each raw value to the token listed here (DESIGN-NOTES.md, "Converting a screen").
  Rule 21: the signal colour exists only as --signal. Everything lighter, darker or transparent is derived from it.
  Not tokens: the Claude Design colour picker options #FF6F91, #6CB4FF, #B9E34A (design tool only).
*/

:root {
  /* ------------------------------------------------------------------ signal */
  --signal: #FF5B2E;
  --on-signal: #151413;                                            /* text and icons on the signal ground */
  --on-signal-muted: color-mix(in srgb, var(--signal) 30%, black); /* replaces #4A1E10 (secondary text, dashed days, inactive tabs on signal) */
  --signal-planned: color-mix(in srgb, var(--signal) 35%, transparent); /* planned blocks, design: {{accent}} at opacity 0.35 */
  --ring-signal: inset 0 0 0 4px var(--signal);                     /* selected card ring (F_PantryRecipes) */

  /* ------------------------------------------------------------------ ink and paper */
  --ink: #151413;          /* text, rules, borders, primary buttons, Mind ground */
  --paper: #FFFFFF;        /* Today and Me grounds, panels, inputs */
  --chalk: #F2F1EE;        /* text and rules on ink */
  --graphite: #5F5D58;     /* secondary text on paper */
  --ash: #A3A09A;          /* secondary text on ink, inactive tabs on Mind */
  --mute: #8A8780;         /* past or locked values, disabled text */
  --fog: #B7B4AE;          /* dashed outline of disabled buttons and locked days */
  --hairline: #E3E0DA;     /* 1px dividers between rows */
  --stone: #F3F1ED;        /* soft fills: pale plate slices, wells, error row */
  --chalk-dim: #D9D6D0;    /* body text on ink in S_Future */
  --dash-soft: #C9C5BE;    /* dashed placeholder outlines (S_Empty) */

  /* night: Mind and other ink grounds */
  --night-ring: #3A3936;   /* rings and outlines on ink (M_Session, M_Breath, M_Done) */
  --night-rule: #33322F;   /* row dividers on ink (A5_Mind, O_Mind) */
  --night-dot: #5A5853;    /* empty outlined dots on ink */

  /* charts */
  --plate-ring: #DAD6CF;   /* plate wheel guide rings at 25, 50, 75 % */
  --bar-track: #EEEBE6;    /* macro bar track */

  /* placeholders and drawings */
  --photo-placeholder: #E9E6E0; /* recipe photo placeholder */
  --map-ground: #E7E4DE;   /* run map ground */
  --map-park: #F1EFEA;     /* run map field */
  --scan-dark: #23221F;    /* camera view (F_Scan, F_Pantry) */
  --scan-rule: #3A3935;    /* shelf lines in the camera view */
  --scan-shelf: #C9C4B8;   /* pantry drawing */
  --scan-light: #E9E5DC;   /* pantry drawing */
  --scan-green: #5E6B52;   /* pantry drawing */
  --mock-bar: #8E8A84;     /* system bar mock (S_Notifications, S_Offline) */
  --mock-bar-light: #C9C6C0;

  /* transparent ink and chalk: always derived */
  --ink-86: color-mix(in srgb, var(--ink) 86%, transparent);
  --ink-55: color-mix(in srgb, var(--ink) 55%, transparent);   /* sheet scrim */
  --ink-45: color-mix(in srgb, var(--ink) 45%, transparent);   /* row rules on the signal ground */
  --ink-30: color-mix(in srgb, var(--ink) 30%, transparent);   /* S_Future scrim */
  --ink-25: color-mix(in srgb, var(--ink) 25%, transparent);
  --ink-22: color-mix(in srgb, var(--ink) 22%, transparent);   /* Eat ground hatch line */
  --ink-20: color-mix(in srgb, var(--ink) 20%, transparent);
  --ink-16: color-mix(in srgb, var(--ink) 16%, transparent);
  --ink-12: color-mix(in srgb, var(--ink) 12%, transparent);   /* onboarding progress, not reached */
  --ink-10: color-mix(in srgb, var(--ink) 10%, transparent);
  --chalk-50: color-mix(in srgb, var(--chalk) 50%, transparent);
  --chalk-30: color-mix(in srgb, var(--chalk) 30%, transparent);
  --chalk-20: color-mix(in srgb, var(--chalk) 20%, transparent);
  --chalk-18: color-mix(in srgb, var(--chalk) 18%, transparent);
  --chalk-16: color-mix(in srgb, var(--chalk) 16%, transparent);
  --chalk-12: color-mix(in srgb, var(--chalk) 12%, transparent);
  --chalk-07: color-mix(in srgb, var(--chalk) 7%, transparent);
  --chalk-06: color-mix(in srgb, var(--chalk) 6%, transparent);
  --chalk-05: color-mix(in srgb, var(--chalk) 5%, transparent);
  --chalk-04: color-mix(in srgb, var(--chalk) 4%, transparent);

  /* hatches (Eat and food marks) */
  --hatch: repeating-linear-gradient(135deg, var(--ink) 0 1px, transparent 1px 3px);          /* food mark, plate slices */
  --hatch-ground: repeating-linear-gradient(135deg, var(--ink-22) 0 1px, transparent 1px 4px); /* Eat page ground */
  --hatch-soft: repeating-linear-gradient(135deg, var(--ink-10) 0 1px, transparent 1px 3px);
  --hatch-mid: repeating-linear-gradient(135deg, var(--ink-30) 0 1px, transparent 1px 4px);
  --hatch-wide: repeating-linear-gradient(135deg, var(--ink-16) 0 1px, transparent 1px 6px);
  --hatch-night: repeating-linear-gradient(135deg, var(--chalk-07) 0 1px, transparent 1px 7px);

  /* part grounds */
  --ground-today: var(--paper);
  --ground-train: var(--signal);
  --ground-eat: var(--paper);          /* plus background-image: var(--hatch-ground), content on white bands */
  --ground-mind: var(--ink);
  --ground-me: var(--paper);

  /* ------------------------------------------------------------------ type */
  --font-sans: 'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --stretch-condensed: 62%;   /* numbers */
  --stretch-wide: 125%;       /* titles */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* font sizes, every size used */
  --fs-9: 9px;   --fs-10: 10px;  --fs-11: 11px;  --fs-12: 12px;  --fs-13: 13px;  --fs-14: 14px;
  --fs-15: 15px; --fs-16: 16px;  --fs-17: 17px;  --fs-18: 18px;  --fs-19: 19px;  --fs-20: 20px;
  --fs-21: 21px; --fs-22: 22px;  --fs-24: 24px;  --fs-26: 26px;  --fs-28: 28px;  --fs-30: 30px;
  --fs-32: 32px; --fs-34: 34px;  --fs-36: 36px;  --fs-38: 38px;  --fs-40: 40px;  --fs-44: 44px;
  --fs-48: 48px; --fs-52: 52px;  --fs-60: 60px;  --fs-64: 64px;  --fs-72: 72px;  --fs-84: 84px;
  --fs-88: 88px; --fs-92: 92px;  --fs-96: 96px;  --fs-108: 108px; --fs-112: 112px; --fs-128: 128px;
  --fs-132: 132px; --fs-150: 150px; --fs-172: 172px;

  /* font sizes, by role */
  --text-mark: var(--fs-9);        /* FUTURE FEATURE mark, day labels */
  --text-mono-s: var(--fs-10);     /* small mono values */
  --text-mono: var(--fs-11);       /* mono labels, section heads */
  --text-mono-l: var(--fs-12);     /* units next to big numbers */
  --text-note: var(--fs-13);
  --text-small: var(--fs-14);
  --text-body: var(--fs-15);       /* rows, body */
  --text-body-l: var(--fs-16);     /* paragraphs, inputs */
  --text-button: var(--fs-17);     /* primary button */
  --title-sheet: var(--fs-28);
  --title-page: var(--fs-34);
  --title-display: var(--fs-48);   /* onboarding, plans, meal prep */

  /* line heights */
  --lh-080: 0.8;  --lh-082: 0.82; --lh-085: 0.85; --lh-086: 0.86; --lh-090: 0.9;  --lh-095: 0.95;
  --lh-100: 1;    --lh-102: 1.02; --lh-105: 1.05; --lh-110: 1.1;  --lh-115: 1.15; --lh-120: 1.2;
  --lh-125: 1.25; --lh-128: 1.28; --lh-130: 1.3;  --lh-135: 1.35; --lh-138: 1.38; --lh-140: 1.4;
  --lh-145: 1.45;

  /* letter spacing */
  --ls-mono: 0.08em;         /* every mono label */
  --ls-mono-tight: 0.06em;   /* segment labels, small mono */
  --ls-mono-xs: 0.04em;
  --ls-wide: 0.1em;
  --ls-05: 0.05em;
  --ls-02: 0.02em;
  --ls-01: 0.01em;
  --ls-title: -0.01em;       /* 34px titles */
  --ls-display: -0.015em;    /* 48px titles */
  --ls-number: -0.02em;
  --ls-number-tight: -0.03em;

  /* ------------------------------------------------------------------ space */
  --space-1: 1px;   --space-2: 2px;   --space-3: 3px;   --space-4: 4px;   --space-5: 5px;
  --space-6: 6px;   --space-7: 7px;   --space-8: 8px;   --space-10: 10px; --space-12: 12px;
  --space-14: 14px; --space-16: 16px; --space-18: 18px; --space-20: 20px; --space-22: 22px;
  --space-24: 24px; --space-26: 26px; --space-28: 28px; --space-30: 30px; --space-32: 32px;
  --space-34: 34px; --space-36: 36px; --space-40: 40px; --space-42: 42px; --space-44: 44px;
  --space-48: 48px; --space-50: 50px; --space-54: 54px; --space-56: 56px; --space-58: 58px;
  --space-70: 70px; --space-84: 84px;

  --screen-pad-top: var(--space-54);     /* below the status bar; add env(safe-area-inset-top) in the app if larger */
  --screen-pad-x: var(--space-20);
  --screen-pad-bottom: var(--space-34);  /* above the home bar */
  --section-gap: var(--space-22);        /* space above a section rule */

  /* ------------------------------------------------------------------ radii, lines, shadows */
  --radius-none: 0;          /* everything is square */
  --radius-round: 50%;       /* dots, rings, the play button */
  --line-hair: 1px;
  --line-mid: 1.5px;
  --line: 2px;               /* borders of boxes, buttons, inputs; section rules */
  --line-heavy: 3px;
  --shadow-none: none;       /* the design uses no drop shadows */
  --ring-ink: inset 0 0 0 2px var(--ink);

  /* ------------------------------------------------------------------ sizes */
  --screen-w: 390px;
  --screen-h: 844px;
  --tap: 44px;               /* icon buttons, steppers, top bar */
  --row: 48px;               /* list rows, inputs, segments in lists */
  --row-tall: 60px;          /* rows with a switch or a second line */
  --button-h: 56px;          /* primary button */
  --segment-h: 40px;         /* segmented control in sheets and lists */
  --segment-h-l: 44px;       /* segmented control on tabs and Log food */
  --switch-w: 56px;
  --switch-h: 32px;
  --switch-knob: 22px;
  --checkbox: 26px;
  --input-h: 52px;          /* text fields */
  --search-h: 48px;         /* search field */
  --tick: 26px;             /* tick box (confirm sheets) */
  --tick-s: 22px;           /* markers in choice lists */
  --input-h-s: 36px;         /* numbers in a set row (W_Past) */
  --tabbar-h: 84px;
  --tabbar-pad-bottom: 28px;
  --handle-w: 40px;
  --handle-h: 4px;
  --mark-h: 18px;            /* FUTURE FEATURE mark */
  --mark-pad-x: 6px;

  /* ------------------------------------------------------------------ motion and layers */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-sheet: .34s;
  --dur-scrim: .24s;
  --dur-pop: .26s;
  --dur-pop-scrim: .2s;
  --opacity-planned: 0.35;
  --z-page: 0;
  --z-scrim: 1;
  --z-sheet: 2;
  --z-mark: 6;
  --z-tabbar: 3;             /* the tab bar stays fixed at the bottom; content scrolls above it */
  --z-surface: 1;            /* full-size button over a surface that opens S_Future */
  --z-surface-control: 2;    /* controls inside such a surface (END, Clear search) stay on top */
  --z-popup-scrim: 40;       /* S_Future, S_SaveFailed, S_StorageFull */
  --z-popup: 41;
  --ring-popup-dark: 0 0 0 2px var(--chalk);  /* popup card on dark grounds (Mind, camera) */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-sheet: 0s; --dur-scrim: 0s; --dur-pop: 0s; --dur-pop-scrim: 0s; }
}