/* ==========================================================================
   tokens.css — the whole design system as custom properties.
   Nothing in app.css may hard-code a colour, size, radius or duration.
   Light is the default; dark is a first-class override.
   ========================================================================== */

:root {
  /* --- Typeface ------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --font-rounded: -apple-system, BlinkMacSystemFont, "SF Pro Rounded",
    "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    monospace;

  /* Tabular numerals — apply to any quantity readout. */
  --numeric-tabular: "tnum" 1, "lnum" 1;

  /* --- Type scale (Apple naming) -------------------------------------- */
  --text-largeTitle-size: 34px;
  --text-largeTitle-line: 41px;
  --text-largeTitle-track: -0.4px;
  --text-largeTitle-weight: 700;

  --text-title1-size: 28px;
  --text-title1-line: 34px;
  --text-title1-track: -0.35px;
  --text-title1-weight: 700;

  --text-title2-size: 22px;
  --text-title2-line: 28px;
  --text-title2-track: -0.26px;
  --text-title2-weight: 700;

  --text-title3-size: 20px;
  --text-title3-line: 25px;
  --text-title3-track: -0.2px;
  --text-title3-weight: 600;

  --text-headline-size: 17px;
  --text-headline-line: 22px;
  --text-headline-track: -0.41px;
  --text-headline-weight: 600;

  --text-body-size: 17px;
  --text-body-line: 22px;
  --text-body-track: -0.41px;
  --text-body-weight: 400;

  --text-callout-size: 16px;
  --text-callout-line: 21px;
  --text-callout-track: -0.32px;
  --text-callout-weight: 400;

  --text-subhead-size: 15px;
  --text-subhead-line: 20px;
  --text-subhead-track: -0.24px;
  --text-subhead-weight: 400;

  --text-footnote-size: 13px;
  --text-footnote-line: 18px;
  --text-footnote-track: -0.08px;
  --text-footnote-weight: 400;

  --text-caption1-size: 12px;
  --text-caption1-line: 16px;
  --text-caption1-track: 0px;
  --text-caption1-weight: 400;

  --text-caption2-size: 11px;
  --text-caption2-line: 13px;
  --text-caption2-track: 0.06px;
  --text-caption2-weight: 400;

  /* --- Spacing scale --------------------------------------------------- */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;

  /* Horizontal page gutter — grouped lists inset by this. */
  --gutter: 16px;
  /* Minimum comfortable hit area. Never go below this on a control. */
  --hit: 44px;

  /* --- Radii (continuous-corner feel: generous, never pill-by-accident) - */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-sheet: 22px;
  --radius-full: 999px;

  /* --- Motion ---------------------------------------------------------- */
  --duration-instant: 0.1s;
  --duration-fast: 0.16s;
  --duration-base: 0.22s;
  --duration-slow: 0.32s;
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);      /* Apple sheet curve   */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1); /* short overshoot    */

  /* --- Z layers -------------------------------------------------------- */
  --z-header: 20;
  --z-tabbar: 30;
  --z-sheet: 100;
  --z-toast: 200;

  /* ====================== LIGHT COLOUR SCHEME ========================== */
  color-scheme: light;

  --label: rgb(0 0 0);
  /* Apple ships secondary label at 0.6 alpha, which measures 3.44:1 on white
     and 3.11:1 inside a fill — under the 4.5:1 WCAG floor for text this size,
     and it is the colour most of this app's supporting text is written in
     (ingredient originals, card meta, section headers, storage figures).
     53 text runs measured below the floor at 0.6 in composited pixels
     (core/contrast.js, 2026-08-01). 0.75 clears it on white, on the grouped
     background and inside a fill, and still reads as clearly secondary
     against --label. */
  --label-secondary: rgb(60 60 67 / 0.78);
  /* Placeholders sit on a filled field, which is a lighter backdrop than the
     page — secondary measures 3.90:1 there. This is the same grey, pushed far
     enough to clear the floor on that fill. */
  --label-placeholder: rgb(60 60 67 / 0.85);
  /* Decorative and disabled only — chevrons, dividers, dimmed controls. Any
     TEXT a user is meant to read (including placeholders) uses secondary. */
  --label-tertiary: rgb(60 60 67 / 0.3);
  --label-quaternary: rgb(60 60 67 / 0.18);
  --label-inverted: rgb(255 255 255);

  --separator: rgb(60 60 67 / 0.29);
  --separator-opaque: rgb(198 198 200);

  --bg-system: rgb(255 255 255);
  --bg-system-secondary: rgb(242 242 247);
  --bg-system-tertiary: rgb(255 255 255);

  --bg-grouped: rgb(242 242 247);
  --bg-grouped-secondary: rgb(255 255 255);
  --bg-grouped-tertiary: rgb(242 242 247);

  --fill-1: rgb(120 120 128 / 0.2);
  --fill-2: rgb(120 120 128 / 0.16);
  --fill-3: rgb(118 118 128 / 0.12);
  --fill-4: rgb(116 116 128 / 0.08);

  /* Single accent. Warm ember — this is a cookbook, not a bank. */
  --accent: rgb(196 80 43);
  /* The same ember, dark enough to be TEXT. --accent measures 4.33:1 on white
     and 3.58:1 on --accent-soft: fine for a 22px glyph or a filled button
     (the 3:1 non-text floor), under the floor for a word. Every accent-
     coloured WORD uses this; icons and fills keep --accent. */
  --accent-text: rgb(166 58 30);
  --accent-pressed: rgb(160 62 32);
  --accent-soft: rgb(196 80 43 / 0.12);
  --accent-soft-pressed: rgb(196 80 43 / 0.22);
  --accent-on: rgb(255 255 255);

  --destructive: rgb(215 45 40);
  --destructive-pressed: rgb(178 33 29);
  --destructive-soft: rgb(215 45 40 / 0.12);
  --destructive-on: rgb(255 255 255);

  --success: rgb(41 143 79);
  --success-on: rgb(255 255 255);
  --warning: rgb(196 126 15);
  --warning-on: rgb(255 255 255);

  /* Materials */
  --material-thick: rgb(255 255 255 / 0.82);
  --material-thin: rgb(255 255 255 / 0.68);
  --scrim: rgb(0 0 0 / 0.28);

  /* Shadows — depth from light, not from borders. */
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-2: 0 1px 2px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.06);
  --shadow-3: 0 2px 6px rgb(0 0 0 / 0.06), 0 12px 32px rgb(0 0 0 / 0.1);
  --shadow-sheet: 0 -1px 0 rgb(0 0 0 / 0.05), 0 -12px 48px rgb(0 0 0 / 0.18);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgb(196 80 43 / 0.35);
  --focus-ring-width: 2px;

  /* Skeleton shimmer */
  --skeleton-base: rgb(118 118 128 / 0.12);
  --skeleton-sheen: rgb(255 255 255 / 0.55);

  /* Search-match highlight. Tinted, never a yellow <mark>. */
  --highlight-bg: rgb(196 80 43 / 0.18);
  --highlight-bg-active: rgb(196 80 43 / 0.34);
}

/* ======================== DARK COLOUR SCHEME =========================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --label: rgb(255 255 255);
    --label-secondary: rgb(235 235 245 / 0.6);
    --label-tertiary: rgb(235 235 245 / 0.3);
    --label-placeholder: rgb(235 235 245 / 0.75);
    --label-quaternary: rgb(235 235 245 / 0.16);
    --label-inverted: rgb(0 0 0);

    --separator: rgb(84 84 88 / 0.65);
    --separator-opaque: rgb(56 56 58);

    --bg-system: rgb(0 0 0);
    --bg-system-secondary: rgb(28 28 30);
    --bg-system-tertiary: rgb(44 44 46);

    --bg-grouped: rgb(0 0 0);
    --bg-grouped-secondary: rgb(28 28 30);
    --bg-grouped-tertiary: rgb(44 44 46);

    --fill-1: rgb(120 120 128 / 0.36);
    --fill-2: rgb(120 120 128 / 0.32);
    --fill-3: rgb(118 118 128 / 0.24);
    --fill-4: rgb(118 118 128 / 0.18);

    --accent: rgb(255 138 90);
    /* On a black field the bright ember already clears the text floor, so the
       text variant is the accent itself. The token exists in both schemes so
       app.css never has to ask which one it is in. */
    --accent-text: rgb(255 138 90);
    --accent-pressed: rgb(226 112 68);
    --accent-soft: rgb(255 138 90 / 0.18);
    --accent-soft-pressed: rgb(255 138 90 / 0.28);
    --accent-on: rgb(38 12 4);

    --destructive: rgb(255 105 97);
    --destructive-pressed: rgb(226 85 78);
    --destructive-soft: rgb(255 105 97 / 0.18);
    --destructive-on: rgb(42 6 4);

    --success: rgb(66 190 111);
    --success-on: rgb(0 26 11);
    --warning: rgb(255 190 61);
    --warning-on: rgb(40 26 0);

    --material-thick: rgb(30 30 32 / 0.84);
    --material-thin: rgb(30 30 32 / 0.66);
    --scrim: rgb(0 0 0 / 0.5);

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
    --shadow-2: 0 1px 2px rgb(0 0 0 / 0.5), 0 4px 14px rgb(0 0 0 / 0.5);
    --shadow-3: 0 2px 8px rgb(0 0 0 / 0.55), 0 14px 36px rgb(0 0 0 / 0.6);
    --shadow-sheet: 0 -1px 0 rgb(255 255 255 / 0.06),
      0 -12px 48px rgb(0 0 0 / 0.7);

    --focus-ring: 0 0 0 3px rgb(255 138 90 / 0.4);

    --skeleton-base: rgb(120 120 128 / 0.24);
    --skeleton-sheen: rgb(255 255 255 / 0.1);

    --highlight-bg: rgb(255 138 90 / 0.28);
    --highlight-bg-active: rgb(255 138 90 / 0.46);
  }
}

/* ---- Explicit theme overrides (gallery + a future settings toggle) ----
   [data-theme="dark"] forces dark regardless of the OS preference.       */
:root[data-theme="dark"] {
  color-scheme: dark;

  --label: rgb(255 255 255);
  --label-secondary: rgb(235 235 245 / 0.6);
  --label-tertiary: rgb(235 235 245 / 0.3);
  --label-placeholder: rgb(235 235 245 / 0.75);
  --label-quaternary: rgb(235 235 245 / 0.16);
  --label-inverted: rgb(0 0 0);

  --separator: rgb(84 84 88 / 0.65);
  --separator-opaque: rgb(56 56 58);

  --bg-system: rgb(0 0 0);
  --bg-system-secondary: rgb(28 28 30);
  --bg-system-tertiary: rgb(44 44 46);

  --bg-grouped: rgb(0 0 0);
  --bg-grouped-secondary: rgb(28 28 30);
  --bg-grouped-tertiary: rgb(44 44 46);

  --fill-1: rgb(120 120 128 / 0.36);
  --fill-2: rgb(120 120 128 / 0.32);
  --fill-3: rgb(118 118 128 / 0.24);
  --fill-4: rgb(118 118 128 / 0.18);

  --accent: rgb(255 138 90);
  --accent-text: rgb(255 138 90);
  --accent-pressed: rgb(226 112 68);
  --accent-soft: rgb(255 138 90 / 0.18);
  --accent-soft-pressed: rgb(255 138 90 / 0.28);
  --accent-on: rgb(38 12 4);

  --destructive: rgb(255 105 97);
  --destructive-pressed: rgb(226 85 78);
  --destructive-soft: rgb(255 105 97 / 0.18);
  --destructive-on: rgb(42 6 4);

  --success: rgb(66 190 111);
  --success-on: rgb(0 26 11);
  --warning: rgb(255 190 61);
  --warning-on: rgb(40 26 0);

  --material-thick: rgb(30 30 32 / 0.84);
  --material-thin: rgb(30 30 32 / 0.66);
  --scrim: rgb(0 0 0 / 0.5);

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-2: 0 1px 2px rgb(0 0 0 / 0.5), 0 4px 14px rgb(0 0 0 / 0.5);
  --shadow-3: 0 2px 8px rgb(0 0 0 / 0.55), 0 14px 36px rgb(0 0 0 / 0.6);
  --shadow-sheet: 0 -1px 0 rgb(255 255 255 / 0.06), 0 -12px 48px rgb(0 0 0 / 0.7);

  --focus-ring: 0 0 0 3px rgb(255 138 90 / 0.4);

  --skeleton-base: rgb(120 120 128 / 0.24);
  --skeleton-sheen: rgb(255 255 255 / 0.1);

  --highlight-bg: rgb(255 138 90 / 0.28);
  --highlight-bg-active: rgb(255 138 90 / 0.46);
}