/* Hallmark · genre: playful→editorial · macrostructure: Workbench (app shell) · theme: Sadya
 * tone: warm-utilitarian · anchor hue: banana-leaf green 148 + kasavu gold 85 + red matta 30 · nav: bottom tab bar (mobile) / top rail (desktop)
 * audience: a busy two-parent Malayali family in Australia · use: see today's meals, tonight's prep, the week's shop
 */
:root {
  /* paper & ink — kasavu cotton, banana-leaf ink */
  --color-paper:    oklch(96.4% 0.020 92);
  --color-paper-2:  oklch(93.5% 0.024 92);
  --color-paper-3:  oklch(88.5% 0.030 90);
  --color-surface:  oklch(99.3% 0.007 92);
  --color-rule:     oklch(86%   0.030 100);
  --color-rule-2:   oklch(64%   0.040 132);
  --color-muted:    oklch(44%   0.040 145);
  --color-neutral:  oklch(38%   0.042 145);
  --color-ink-2:    oklch(31%   0.048 150);
  --color-ink:      oklch(24%   0.050 150);

  /* accents — banana-leaf green (primary), red matta (the relaxed cook / weekend), gold (kasavu border), amber (label checks) */
  --color-accent:     oklch(45%   0.14  148);
  --color-accent-2:   oklch(50%   0.15  30);
  --color-accent-ink: oklch(97%   0.018 92);
  --color-accent-wash: oklch(90%  0.075 145);
  --color-clay-wash:  oklch(92%   0.050 30);
  --color-gold:       oklch(72%   0.13  85);
  --color-warn:       oklch(48%   0.12  70);
  --color-warn-wash:  oklch(93%   0.060 85);
  --color-focus:      oklch(45%   0.14  148);

  --font-display: "Young Serif", ui-serif, Georgia, serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  clamp(1.9rem, 2.4vw + 1rem, 2.6rem);

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;

  --radius-card:  12px;
  --radius-input: 8px;
  --radius-pill:  999px;
  --rule: 1px;

  --shadow-card: 0 14px 34px -22px oklch(24% 0.05 150 / 0.28), 0 1px 2px oklch(24% 0.05 150 / 0.08);
  --shadow-sheet: 0 24px 60px -20px oklch(20% 0.05 150 / 0.45);
  --shadow-knob: 0 1px 2px oklch(20% 0.03 150 / 0.3);
  --scrim: oklch(20% 0.03 150 / 0.45);
  --shadow-float: 0 8px 28px -12px oklch(20% 0.04 150 / 0.35);
  --shadow-thumb: 0 1px 2px oklch(20% 0.03 150 / 0.3), 0 2px 6px oklch(20% 0.03 150 / 0.18);

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 180ms;
  --dur-long:  420ms;

  --z-sticky: 200;
  --z-nav: 300;
  --z-toast: 500;

  --measure: 62ch;
  --topbar-h: 3.6rem;
  /* safe areas: the phone app injects --safe-area-inset-*; browsers use env() */
  --sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --sal: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
  --sar: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));

  /* calendar categories (Outlook-style): wash + stripe */
  --ev-breakfast: oklch(93% 0.063 88);  --ev-breakfast-line: oklch(66% 0.150 82);
  --ev-lunch:     oklch(92% 0.063 148); --ev-lunch-line:     oklch(48% 0.150 148);
  --ev-tea:       oklch(92.5% 0.050 30); --ev-tea-line:      oklch(50% 0.150 30);
  --ev-dinner:    oklch(91.5% 0.040 175); --ev-dinner-line:  oklch(42% 0.090 175);
  --ev-prep:      oklch(92% 0.035 315); --ev-prep-line:      oklch(52% 0.110 318);
  --ev-shop:      oklch(92% 0.040 200); --ev-shop-line:      oklch(52% 0.090 205);
  --ev-ink:       oklch(24% 0.030 150);
  --cal-hour-line: oklch(86% 0.020 110);
  --cal-now: oklch(55% 0.19 30);
  --tabbar-h: 4.25rem;

  /* native app shell (Material 3 numbers; .plat-ios swaps in Apple's) */
  --appbar-h: 4rem;          /* M3 top app bar 64dp · iOS nav bar 44pt */
  --navbar-h: 5rem;          /* M3 navigation bar 80dp · iOS tab bar 62pt floating */
  --rail-w: 5.5rem;          /* M3 navigation rail */
  --touch: 3rem;             /* 48dp minimum target (iOS 44pt) */
  --row-h: 3.5rem;           /* one-line list row 56dp */
  --radius-group: 18px;      /* inset grouped list / card container */
  --radius-sheet: 28px;      /* bottom sheet top corners */
  --radius-ind: 16px;        /* nav indicator pill (64 × 32) */
  --text-title: 2.125rem;    /* large title, 34pt */
  --dur-page: 200ms;
  --dur-sheet: 280ms;
  --color-bar: color-mix(in oklch, var(--color-paper) 84%, transparent);
  --color-danger: oklch(50% 0.17 28);
  --color-fill: oklch(93.5% 0.024 92);   /* tonal fill on surfaces: chips, steppers, search */
  --color-inverse: var(--color-ink);
  --color-inverse-ink: var(--color-paper);
  --color-inverse-accent: oklch(80% 0.13 148);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper:    oklch(17%  0.020 150);
    --color-paper-2:  oklch(21%  0.022 150);
    --color-paper-3:  oklch(25%  0.024 150);
    --color-surface:  oklch(21%  0.025 150);
    --color-rule:     oklch(32%  0.020 145);
    --color-rule-2:   oklch(55%  0.030 140);
    --color-muted:    oklch(72%  0.026 120);
    --color-neutral:  oklch(80%  0.022 110);
    --color-ink-2:    oklch(88%  0.016 100);
    --color-ink:      oklch(94%  0.012 95);
    --color-accent:     oklch(76%  0.14  148);
    --color-accent-2:   oklch(74%  0.12  30);
    --color-accent-ink: oklch(18%  0.03  150);
    --color-accent-wash: oklch(31% 0.060 148);
    --color-clay-wash:  oklch(30%  0.050 30);
    --color-gold:       oklch(70%  0.12  85);
    --color-warn:       oklch(80%  0.11  80);
    --color-warn-wash:  oklch(30%  0.05  80);
    --color-focus:      oklch(80%  0.14  148);
    --shadow-card: 0 1px 0 oklch(30% 0.02 150 / 0.6);
    --scrim: oklch(8% 0.02 150 / 0.65);
    --ev-breakfast: oklch(32% 0.050 85);  --ev-breakfast-line: oklch(78% 0.130 85);
    --ev-lunch:     oklch(31% 0.050 148); --ev-lunch-line:     oklch(76% 0.130 148);
    --ev-tea:       oklch(31% 0.050 30);  --ev-tea-line:       oklch(76% 0.120 30);
    --ev-dinner:    oklch(31% 0.040 175); --ev-dinner-line:    oklch(76% 0.090 175);
    --ev-prep:      oklch(31% 0.040 318); --ev-prep-line:      oklch(76% 0.090 318);
    --ev-shop:      oklch(31% 0.035 205); --ev-shop-line:      oklch(76% 0.080 205);
    --ev-ink:       oklch(94% 0.012 95);
    --cal-hour-line: oklch(28% 0.016 150);
    --cal-now: oklch(72% 0.16 30);
    --color-danger: oklch(72% 0.15 28);
    --color-fill: oklch(28% 0.024 150);
    --color-inverse-accent: oklch(42% 0.13 148);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-paper:    oklch(17%  0.020 150);
  --color-paper-2:  oklch(21%  0.022 150);
  --color-paper-3:  oklch(25%  0.024 150);
  --color-surface:  oklch(21%  0.025 150);
  --color-rule:     oklch(32%  0.020 145);
  --color-rule-2:   oklch(55%  0.030 140);
  --color-muted:    oklch(72%  0.026 120);
  --color-neutral:  oklch(80%  0.022 110);
  --color-ink-2:    oklch(88%  0.016 100);
  --color-ink:      oklch(94%  0.012 95);
  --color-accent:     oklch(76%  0.14  148);
  --color-accent-2:   oklch(74%  0.12  30);
  --color-accent-ink: oklch(18%  0.03  150);
  --color-accent-wash: oklch(31% 0.060 148);
  --color-clay-wash:  oklch(30%  0.050 30);
    --color-gold:       oklch(70%  0.12  85);
  --color-warn:       oklch(80%  0.11  80);
  --color-warn-wash:  oklch(30%  0.05  80);
  --color-focus:      oklch(80%  0.14  148);
  --shadow-card: 0 1px 0 oklch(30% 0.02 150 / 0.6);
  --scrim: oklch(8% 0.02 150 / 0.65);
  --ev-breakfast: oklch(32% 0.050 85);  --ev-breakfast-line: oklch(78% 0.130 85);
  --ev-lunch:     oklch(31% 0.050 148); --ev-lunch-line:     oklch(76% 0.130 148);
  --ev-tea:       oklch(31% 0.050 30);  --ev-tea-line:       oklch(76% 0.120 30);
  --ev-dinner:    oklch(31% 0.040 175); --ev-dinner-line:    oklch(76% 0.090 175);
  --ev-prep:      oklch(31% 0.040 318); --ev-prep-line:      oklch(76% 0.090 318);
  --ev-shop:      oklch(31% 0.035 205); --ev-shop-line:      oklch(76% 0.080 205);
  --ev-ink:       oklch(94% 0.012 95);
  --cal-hour-line: oklch(28% 0.016 150);
  --cal-now: oklch(72% 0.16 30);
  --color-danger: oklch(72% 0.15 28);
  --color-fill: oklch(28% 0.024 150);
  --color-inverse-accent: oklch(42% 0.13 148);
  color-scheme: dark;
}