/* ============================================================================
   Jollibee Rewards prototype — Design tokens
   Structure/typography/spacing/radius from nmblr.foundry-codex (the foundry MCP).
   COLORS: the OFFICIAL Jollibee palette (extracted from jollibeefoods.com/rewards,
   supplied 2026-07-22). Every brand color is an exact palette hex; tints are
   DERIVED from those hexes via color-mix — no invented colors.

   Palette anchors:
     #E31837 Jollibee Red (primary) · #C92B39 Deep Maroon (secondary) ·
     #EFBB40 Golden Yellow (CTA) · benefit-tile accents #E4002B/#42C0D8/#FF8000/
     #FEC700/#BADD09/#864B1E · neutrals #222222/#FFFFFF/#FAF9F5/#EDEDED/#F2F9FD.

   Theming: [data-product="jollibee"] on <html>; dark via `.dark`. Reference
   --c-* only in component/screen CSS.
   ========================================================================== */

/* Brand display face — Jellee (local). Rounded/friendly QSR display face. */
@font-face {
  font-family: "Jellee";
  src: url("../fonts/Jellee-Roman.ttf") format("truetype"),
       url("../fonts/Jellee-Roman.otf") format("opentype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand red (official) ---- */
  --c-accent: #E31837;            /* Jollibee Red (primary) */
  --c-accent-bright: #D8262F;     /* Red Variant (hover/alt) */
  --c-accent-faint: color-mix(in srgb, #E31837 9%, #FFFFFF);
  --c-accent-solid: #E31837;
  --c-accent-strong: #C92B39;     /* Deep Maroon Red (secondary accents/text) */

  /* ---- Brand yellow (official) ---- */
  --c-brand-yellow: #EFBB40;      /* Golden Yellow (CTA) */
  --c-brand-yellow-strong: color-mix(in srgb, #EFBB40 60%, #000000);
  --c-brand-yellow-faint: color-mix(in srgb, #EFBB40 20%, #FFFFFF);
  --c-on-yellow: #222222;         /* near-black text on yellow (official neutral) */

  /* ---- Benefit-tile accents (official Jollibee tile colors) ---- */
  --c-tile-red: #E4002B;
  --c-tile-teal: #42C0D8;
  --c-tile-orange: #FF8000;
  --c-tile-gold: #FEC700;
  --c-tile-lime: #BADD09;
  --c-tile-brown: #864B1E;

  /* ---- Neutrals (official + derived grays) ---- */
  --c-canvas: #FAF9F5;            /* Cream */
  --c-surface: #FFFFFF;
  --c-surface-raised: #FFFFFF;
  --c-surface-inset: #FFFFFF;
  --c-surface-overlay: #FFFFFF;
  --c-surface-hover: rgba(34, 34, 34, 0.05);
  --c-surface-active: rgba(34, 34, 34, 0.09);
  --c-subtle: #EDEDED;            /* Light Gray */
  --c-border: #EDEDED;            /* Light Gray */
  --c-border-strong: color-mix(in srgb, #222222 22%, #FFFFFF);
  --c-text: #222222;              /* Near Black */
  --c-text-2: color-mix(in srgb, #222222 64%, #FFFFFF);
  --c-muted: color-mix(in srgb, #222222 52%, #FFFFFF);
  --c-icon: color-mix(in srgb, #222222 48%, #FFFFFF);
  --c-text-subtle: color-mix(in srgb, #222222 34%, #FFFFFF);
  --c-text-ghost: color-mix(in srgb, #222222 28%, #FFFFFF);
  --c-disabled: color-mix(in srgb, #222222 26%, #FFFFFF);
  --c-text-on-accent: #FFFFFF;
  --c-text-on-accent-solid: #FFFFFF;

  /* ---- Semantic status — mapped to the Jollibee palette ---- */
  --c-success: color-mix(in srgb, #BADD09 80%, #000000);   /* Lime, deepened for legibility */
  --c-success-bg: color-mix(in srgb, #BADD09 20%, #FFFFFF);
  --c-success-border: color-mix(in srgb, #BADD09 44%, #FFFFFF);
  --c-success-text: color-mix(in srgb, #BADD09 62%, #000000);
  --c-warning: #FF8000;           /* Orange */
  --c-warning-bg: color-mix(in srgb, #FF8000 15%, #FFFFFF);
  --c-warning-border: color-mix(in srgb, #FF8000 38%, #FFFFFF);
  --c-warning-text: color-mix(in srgb, #FF8000 46%, #000000);
  --c-error: #C92B39;             /* Deep Maroon Red (distinct from primary) */
  --c-error-bg: color-mix(in srgb, #C92B39 11%, #FFFFFF);
  --c-error-border: color-mix(in srgb, #C92B39 32%, #FFFFFF);
  --c-error-text: color-mix(in srgb, #C92B39 58%, #000000);
  --c-info: #42C0D8;              /* Teal */
  --c-info-bg: color-mix(in srgb, #42C0D8 15%, #FFFFFF);
  --c-info-border: color-mix(in srgb, #42C0D8 36%, #FFFFFF);
  --c-info-text: color-mix(in srgb, #42C0D8 50%, #000000);

  /* ---- Gradients (official reds + golds) ---- */
  --c-gradient-brand: linear-gradient(140deg, #E31837 0%, #C92B39 100%);
  --c-gradient-points: linear-gradient(135deg, #FEC700 0%, #EFBB40 100%);
  --c-gradient-brand-reverse: linear-gradient(90deg, #C92B39 0%, #E31837 100%);

  /* ---- Typography (Foundry three-tier + Jellee brand face) ---- */
  --font-brand: "Jellee", "Baloo 2", ui-rounded, system-ui, sans-serif;
  --font-display: "Baloo 2", ui-rounded, system-ui, sans-serif;
  --font-text: "Nunito Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Spacing (Foundry) ---- */
  --space-0: 0;
  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-6: 0.375rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;

  /* ---- Radius (Foundry) ---- */
  --radius-sm: 0.25rem;
  --radius-6: 0.375rem;
  --radius-md: 0.5rem;
  --radius-10: 0.625rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-20: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-34: 2.125rem;
  --radius-50: 3.125rem;
  --radius-full: 9999px;
}

:root.dark {
  /* Dark mode — all derived from the official hexes (+ #141413 near-black). */
  --c-accent: color-mix(in srgb, #E31837 80%, #FFFFFF);
  --c-accent-bright: color-mix(in srgb, #D8262F 82%, #FFFFFF);
  --c-accent-faint: color-mix(in srgb, #E31837 22%, #141413);
  --c-accent-solid: color-mix(in srgb, #E31837 84%, #FFFFFF);
  --c-accent-strong: color-mix(in srgb, #E31837 62%, #FFFFFF);

  --c-brand-yellow: #EFBB40;
  --c-brand-yellow-strong: color-mix(in srgb, #EFBB40 72%, #FFFFFF);
  --c-brand-yellow-faint: color-mix(in srgb, #EFBB40 22%, #141413);
  --c-on-yellow: #222222;

  --c-tile-red: color-mix(in srgb, #E4002B 82%, #FFFFFF);
  --c-tile-teal: #42C0D8;
  --c-tile-orange: #FF8000;
  --c-tile-gold: #FEC700;
  --c-tile-lime: #BADD09;
  --c-tile-brown: color-mix(in srgb, #864B1E 60%, #FFFFFF);

  --c-canvas: #141413;            /* Near Black (official) */
  --c-surface: color-mix(in srgb, #FFFFFF 8%, #141413);
  --c-surface-raised: color-mix(in srgb, #FFFFFF 12%, #141413);
  --c-surface-inset: color-mix(in srgb, #FFFFFF 6%, #141413);
  --c-surface-overlay: color-mix(in srgb, #FFFFFF 18%, #141413);
  --c-surface-hover: rgba(255, 255, 255, 0.07);
  --c-surface-active: rgba(255, 255, 255, 0.10);
  --c-subtle: color-mix(in srgb, #FFFFFF 8%, #141413);
  --c-border: rgba(255, 255, 255, 0.12);
  --c-border-strong: rgba(255, 255, 255, 0.24);
  --c-text: #FFFFFF;
  --c-text-2: rgba(255, 255, 255, 0.72);
  --c-muted: rgba(255, 255, 255, 0.60);
  --c-icon: rgba(255, 255, 255, 0.55);
  --c-text-subtle: rgba(255, 255, 255, 0.42);
  --c-text-ghost: rgba(255, 255, 255, 0.35);
  --c-disabled: rgba(255, 255, 255, 0.30);
  --c-text-on-accent: #FFFFFF;
  --c-text-on-accent-solid: #FFFFFF;

  --c-success: #BADD09;
  --c-success-bg: color-mix(in srgb, #BADD09 18%, #141413);
  --c-success-border: color-mix(in srgb, #BADD09 34%, #141413);
  --c-success-text: color-mix(in srgb, #BADD09 72%, #FFFFFF);
  --c-warning: #FF8000;
  --c-warning-bg: color-mix(in srgb, #FF8000 20%, #141413);
  --c-warning-border: color-mix(in srgb, #FF8000 34%, #141413);
  --c-warning-text: color-mix(in srgb, #FF8000 72%, #FFFFFF);
  --c-error: color-mix(in srgb, #C92B39 78%, #FFFFFF);
  --c-error-bg: color-mix(in srgb, #C92B39 22%, #141413);
  --c-error-border: color-mix(in srgb, #C92B39 34%, #141413);
  --c-error-text: color-mix(in srgb, #C92B39 74%, #FFFFFF);
  --c-info: #42C0D8;
  --c-info-bg: color-mix(in srgb, #42C0D8 18%, #141413);
  --c-info-border: color-mix(in srgb, #42C0D8 34%, #141413);
  --c-info-text: color-mix(in srgb, #42C0D8 74%, #FFFFFF);

  --c-gradient-brand: linear-gradient(140deg, #E31837 0%, #C92B39 100%);
  --c-gradient-points: linear-gradient(135deg, #FEC700 0%, #EFBB40 100%);
  --c-gradient-brand-reverse: linear-gradient(90deg, #C92B39 0%, #E31837 100%);
}