/* Fridgey website design tokens. Values mirror fridgey-app/src/theme (palette.ts,
   colors.ts, spacing.ts, typography.ts): Frost Teal as a fill with dark ink on it,
   teal-700 for teal text on light surfaces, slate ink, Plus gold, the charcoal
   "in the bin" card. Light is the default; dark follows the system preference and
   can be forced with <html data-theme="dark|light">. */

:root {
  color-scheme: light;

  /* Grounds and surfaces */
  --bg: #f8fafc;             /* slate-50: page background */
  --mint: #f0fdfa;           /* teal-50: hero and alternating courses */
  --surface: #ffffff;
  --surface-alt: #f1f5f9;    /* slate-100 */
  --paper: #ffffff;          /* shelf-edge tickets stay paper in both themes */
  --paper-ink: #0f172a;
  --paper-ink-2: #475569;
  --paper-ink-3: #64748b;

  /* Ink */
  --ink: #0f172a;            /* slate-900 */
  --ink-2: #475569;          /* slate-600 */
  --ink-3: #64748b;          /* slate-500 */
  --ink-inverse: #f1f5f9;    /* slate-100 */

  /* Brand teal */
  --teal: #14b8a6;           /* teal-500: fills */
  --teal-strong: #0d9488;    /* teal-600 */
  --teal-deep: #0f766e;      /* teal-700 */
  --teal-text: #0f766e;      /* teal on light surfaces (AA) */
  --teal-100: #ccfbf1;
  --teal-200: #99f6e4;
  --teal-300: #5eead4;
  --teal-400: #2dd4bf;
  --teal-900: #134e4a;
  --on-teal: #04201d;        /* dark ink on a teal fill, 6.9:1 */

  /* Device frame around the real screenshots */
  --bezel: #0f172a;
  --bezel-edge: rgba(15, 23, 42, 0.35);

  /* The shelf: a white fridge shelf with a glass edge */
  --shelf-top: #ffffff;
  --shelf-edge: #ccfbf1;
  --shelf-edge-dark: #5eead4;
  --shelf-shadow: rgba(15, 23, 42, 0.3);
  --ticket-rail: var(--teal);

  /* The "use first" sticker (yellow-400, caution) */
  --sticker: #facc15;
  --on-sticker: #0f172a;

  /* Fridgey Plus gold (brand token; the charcoal course's sign uses on-gold) */
  --gold: #fbbf24;
  --on-gold: #422006;
  --gold-tint: #fef3c7;

  /* "In the bin" charcoal course */
  --bin: #1e293b;            /* slate-800 */
  --on-bin: #ffffff;
  --on-bin-muted: #94a3b8;   /* slate-400 */
  --bin-value: #facc15;
  --bin-eaten: #2dd4bf;
  --bin-binned: #f87171;

  /* Status (from the app's status ramp, 700-level for AA on light) */
  --use-soon: #c2410c;       /* orange-700, the app's "use soon" tag */
  --success: #15803d;

  /* Lines and shadows */
  --border: #e2e8f0;         /* slate-200 */
  --border-strong: #cbd5e1;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px -12px rgba(15, 23, 42, 0.18);
  --shadow-ticket: 0 2px 4px rgba(15, 23, 42, 0.08), 0 10px 20px -10px rgba(15, 23, 42, 0.25);
  --shadow-device: 0 24px 48px -16px rgba(15, 23, 42, 0.35), 0 2px 6px rgba(15, 23, 42, 0.12);
  --focus: #0d9488;

  /* Footer */
  --footer-bg: #0f172a;
  --footer-ink: #cbd5e1;
  --footer-ink-strong: #f1f5f9;

  /* Spacing and radius (app scale: 4/8/12/16/20/24/32; radii 8/12/14/16/pill) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Type */
  --font: 'Nunito', ui-rounded, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --text-body: 1.0625rem;
  --lead: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --display: clamp(2.75rem, 1.6rem + 4.8vw, 5.25rem);
  --sign: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem);
  --ticket-big: clamp(1.25rem, 1rem + 0.9vw, 1.6rem);

  /* Layout */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 36rem;
  --page: 72rem;
  --touch: 44px;

  /* Motion: exponential ease-out, one grammar for the whole page */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 520ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #0f172a;
    --mint: #0b1c22;          /* slate-900 with the teal cast of the dark splash */
    --surface: #1e293b;
    --surface-alt: #334155;
    --paper: #f8fafc;
    --ink: #f1f5f9;
    --ink-2: #a3b1c6;
    --ink-3: #94a3b8;
    --ink-inverse: #0f172a;
    --teal: #2dd4bf;          /* teal-400: dark-mode primary fill */
    --teal-strong: #14b8a6;
    --teal-deep: #0d9488;
    --teal-text: #2dd4bf;
    --bezel: #020617;
    --bezel-edge: rgba(255, 255, 255, 0.14);
    --shelf-top: #475569;
    --shelf-edge: #334155;
    --shelf-edge-dark: #1e293b;
    --shelf-shadow: rgba(0, 0, 0, 0.5);
    --ticket-rail: #2dd4bf;
    --gold-tint: #422006;
    --bin: #334155;           /* slate-700, the app's dark bin card */
    --on-bin: #f1f5f9;
    --on-bin-muted: #cbd5e1;
    --use-soon: #fb923c;
    --success: #4ade80;
    --border: #334155;
    --border-strong: #475569;
    --shadow-card: none;
    --shadow-ticket: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 24px -10px rgba(0, 0, 0, 0.6);
    --shadow-device: 0 24px 48px -16px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
    --focus: #5eead4;
    --footer-bg: #020617;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0f172a;
  --mint: #0b1c22;
  --surface: #1e293b;
  --surface-alt: #334155;
  --paper: #f8fafc;
  --ink: #f1f5f9;
  --ink-2: #a3b1c6;
  --ink-3: #94a3b8;
  --ink-inverse: #0f172a;
  --teal: #2dd4bf;
  --teal-strong: #14b8a6;
  --teal-deep: #0d9488;
  --teal-text: #2dd4bf;
  --bezel: #020617;
  --bezel-edge: rgba(255, 255, 255, 0.14);
  --shelf-top: #475569;
  --shelf-edge: #334155;
  --shelf-edge-dark: #1e293b;
  --shelf-shadow: rgba(0, 0, 0, 0.5);
  --ticket-rail: #2dd4bf;
  --gold-tint: #422006;
  --bin: #334155;
  --on-bin: #f1f5f9;
  --on-bin-muted: #cbd5e1;
  --use-soon: #fb923c;
  --success: #4ade80;
  --border: #334155;
  --border-strong: #475569;
  --shadow-card: none;
  --shadow-ticket: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 24px -10px rgba(0, 0, 0, 0.6);
  --shadow-device: 0 24px 48px -16px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
  --focus: #5eead4;
  --footer-bg: #020617;
}