/* ============================================================================
   ADVANTAGE FOODS — DESIGN TOKENS
   ----------------------------------------------------------------------------
   The single source of truth for the visual language.
   Theme: dark · cinematic · monochrome-blue + white.
   Change a value here and it updates everywhere. Safe for non-developers to
   tweak colours, spacing and type — nothing here breaks layout logic.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- BRAND (from the Advantage Foods logo) ----------------------------- */
  --navy:        #22356b;   /* deep brand navy */
  --blue:        #3277bd;   /* brand blue      */
  /* (logo also contains orange #f15a29 + green #90c747 — intentionally unused;
     this build is monochrome-blue. Reintroduce via these vars if ever needed.) */

  /* --- BLUE SCALE (canvas → glow) ---------------------------------------- */
  --ink-blue-900: #03070f;  /* deepest background */
  --ink-blue-850: #060c1a;
  --ink-blue-800: #081226;  /* base canvas        */
  --ink-blue-700: #0b1830;  /* panel              */
  --ink-blue-600: #0f2142;  /* raised panel       */
  --ink-blue-500: #16315f;
  --blue-450:     #2b5fa8;
  --blue-400:     #3277bd;  /* = brand blue */
  --blue-300:     #4d9fe6;  /* primary accent (CTA / links) */
  --blue-200:     #6fb6f2;
  --blue-150:     #93cbff;  /* bright highlight / glow */
  --blue-100:     #bfe0ff;

  /* --- SEMANTIC SURFACES -------------------------------------------------- */
  --bg:            var(--ink-blue-800);
  --bg-deep:       var(--ink-blue-900);
  --panel:         var(--ink-blue-700);
  --panel-raised:  var(--ink-blue-600);
  --glass:         rgba(13, 27, 54, 0.55);
  --glass-strong:  rgba(10, 20, 41, 0.78);

  /* --- TEXT --------------------------------------------------------------- */
  --ink:        #eef4ff;   /* primary text (near-white, faint blue)  */
  --ink-dim:    #c6d6f0;
  --mut:        #93a8ce;   /* muted body / captions                  */
  --faint:      #8296bb;   /* labels, meta (kept AA legible on panel + bg) */
  --on-accent:  #06101f;   /* text on bright-blue fills              */

  --err:        #ff9a8a;   /* form error text                        */

  /* --- LINES & FOCUS ------------------------------------------------------ */
  --line:         rgba(141, 178, 235, 0.12);
  --line-strong:  rgba(141, 178, 235, 0.24);
  --focus:        var(--blue-300);

  /* --- ACCENT (primary action) ------------------------------------------- */
  --accent:        var(--blue-300);
  --accent-hover:  var(--blue-200);
  --accent-press:  var(--blue-400);
  --accent-grad:   linear-gradient(135deg, var(--blue-300) 0%, var(--blue-450) 100%);

  /* --- GLOWS (cinematic blue light, layered behind content) -------------- */
  --glow-core:  rgba(77, 159, 230, 0.32);
  --glow-soft:  rgba(50, 119, 189, 0.18);
  --glow-rim:   rgba(147, 203, 255, 0.10);
  --backdrop-tint: rgba(34, 53, 107, 0.5);   /* lower right backdrop radial */

  /* --- TYPOGRAPHY --------------------------------------------------------- */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-sans:    "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* fluid type scale — clamp(min, fluid, max) */
  --t-eyebrow: clamp(0.66rem, 0.62rem + 0.2vw, 0.74rem);
  --t-body:    clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
  --t-lead:    clamp(1.12rem, 1.02rem + 0.6vw, 1.4rem);
  --t-h4:      clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
  --t-h3:      clamp(1.4rem, 1.2rem + 1.1vw, 2rem);
  --t-h2:      clamp(2rem, 1.5rem + 2.6vw, 3.4rem);
  --t-h1:      clamp(2.7rem, 1.8rem + 4.6vw, 5.6rem);
  --t-display: clamp(3.2rem, 1.8rem + 7vw, 8rem);

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.62;
  --tracking-eyebrow: 0.22em;

  /* --- SPACING (8px base rhythm) ----------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;    --sp-11: 11rem;

  --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --maxw:      75rem;   /* 1200px content column */
  --maxw-wide: 86rem;
  --gutter:    clamp(1.25rem, 0.5rem + 3vw, 2.5rem);

  /* --- RADII -------------------------------------------------------------- */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* --- SHADOWS (cool-toned, never pure black) ---------------------------- */
  --shadow-sm:   0 2px 8px rgba(2, 7, 18, 0.4);
  --shadow-md:   0 14px 40px rgba(2, 7, 18, 0.45);
  --shadow-lg:   0 30px 80px rgba(2, 7, 18, 0.6);
  --shadow-glow: 0 20px 60px rgba(50, 119, 189, 0.22);

  /* --- MOTION (curves & durations — Emil Kowalski calibrated) ------------ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* strong, responsive */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   320ms;
  --dur-reveal: 1100ms;  /* scroll-reveal (marketing pace, allowed > 300ms); slowed for a more graceful entrance */

  /* --- Z-INDEX ------------------------------------------------------------ */
  --z-cursor:     90;
  --z-transition: 80;
  --z-header:     60;
  --z-overlay:    50;
}

/* ============================================================================
   BRAND PAGE THEMES
   ----------------------------------------------------------------------------
   Each brand page carries <body data-brand="slug">. The whole surface scale
   washes in the brand's PRIMARY colour; the brand's accent (buttons, dot nav,
   glows) is a coloured FILL. All TEXT stays white (see the body[data-brand]
   block at the end) so nothing reads as cheap coloured text on the colour field.
   Hot Breads, China Town and Teppan share one vibrant, popping red.
   ========================================================================== */

/* Hot Breads — vibrant red dominance (logo is red + blue; page goes red) */
body[data-brand="hot-breads"] {
  --ink-blue-900: #190708; --ink-blue-850: #210a0a; --ink-blue-800: #2a0c0d; --ink-blue-700: #380f11; --ink-blue-600: #481518; --ink-blue-500: #661f1f;
  --bg: var(--ink-blue-800); --bg-deep: var(--ink-blue-900); --panel: var(--ink-blue-700); --panel-raised: var(--ink-blue-600);
  --glass: rgba(42, 12, 13, 0.6); --glass-strong: rgba(28, 8, 9, 0.82);
  --accent: #ef3e2f; --accent-hover: #ff5a4b; --accent-press: #cf2c1e;
  --accent-grad: linear-gradient(135deg, #ef3e2f 0%, #b8241a 100%);
  --focus: #ef3e2f; --blue-450: #c0362b;
  --glow-core: rgba(239, 62, 47, 0.44); --glow-soft: rgba(239, 62, 47, 0.22); --backdrop-tint: rgba(239, 62, 47, 0.30);
}
/* China Town — vibrant red dominance */
body[data-brand="china-town"] {
  --ink-blue-900: #190708; --ink-blue-850: #210a0a; --ink-blue-800: #2a0c0d; --ink-blue-700: #380f11; --ink-blue-600: #481518; --ink-blue-500: #661f1f;
  --bg: var(--ink-blue-800); --bg-deep: var(--ink-blue-900); --panel: var(--ink-blue-700); --panel-raised: var(--ink-blue-600);
  --glass: rgba(42, 12, 13, 0.6); --glass-strong: rgba(28, 8, 9, 0.82);
  --accent: #ef3e2f; --accent-hover: #ff5a4b; --accent-press: #cf2c1e;
  --accent-grad: linear-gradient(135deg, #ef3e2f 0%, #b8241a 100%);
  --focus: #ef3e2f; --blue-450: #c0362b;
  --glow-core: rgba(239, 62, 47, 0.44); --glow-soft: rgba(239, 62, 47, 0.22); --backdrop-tint: rgba(239, 62, 47, 0.30);
}
/* Teppan — vibrant red dominance (black + red brand, page goes red) */
body[data-brand="teppan"] {
  --ink-blue-900: #190708; --ink-blue-850: #210a0a; --ink-blue-800: #2a0c0d; --ink-blue-700: #380f11; --ink-blue-600: #481518; --ink-blue-500: #661f1f;
  --bg: var(--ink-blue-800); --bg-deep: var(--ink-blue-900); --panel: var(--ink-blue-700); --panel-raised: var(--ink-blue-600);
  --glass: rgba(42, 12, 13, 0.6); --glass-strong: rgba(28, 8, 9, 0.82);
  --accent: #ef3e2f; --accent-hover: #ff5a4b; --accent-press: #cf2c1e;
  --accent-grad: linear-gradient(135deg, #ef3e2f 0%, #b8241a 100%);
  --focus: #ef3e2f; --blue-450: #c0362b;
  --glow-core: rgba(239, 62, 47, 0.44); --glow-soft: rgba(239, 62, 47, 0.22); --backdrop-tint: rgba(239, 62, 47, 0.30);
}
/* Writer's Cafe — heavy near black field, silver white accent (monochrome, no blue) */
body[data-brand="writers-cafe"] {
  --ink-blue-900: #050608; --ink-blue-850: #08090c; --ink-blue-800: #0b0d10; --ink-blue-700: #101318; --ink-blue-600: #161a20; --ink-blue-500: #232935;
  --bg: var(--ink-blue-800); --bg-deep: var(--ink-blue-900); --panel: var(--ink-blue-700); --panel-raised: var(--ink-blue-600);
  --glass: rgba(13, 15, 19, 0.6); --glass-strong: rgba(9, 10, 13, 0.82);
  --accent: #e8edf5; --accent-hover: #ffffff; --accent-press: #cbd3e0;
  --accent-grad: linear-gradient(135deg, #eef2f8 0%, #aab3c4 100%);
  --focus: #e8edf5; --blue-450: #566072;
  --glow-core: rgba(232, 237, 245, 0.14); --glow-soft: rgba(232, 237, 245, 0.08); --backdrop-tint: rgba(232, 237, 245, 0.10);
}
/* The Marina — heavy deep teal field, aqua accent */
body[data-brand="the-marina"] {
  --ink-blue-900: #04100f; --ink-blue-850: #061514; --ink-blue-800: #081a19; --ink-blue-700: #0b2220; --ink-blue-600: #0f2c2a; --ink-blue-500: #164240;
  --bg: var(--ink-blue-800); --bg-deep: var(--ink-blue-900); --panel: var(--ink-blue-700); --panel-raised: var(--ink-blue-600);
  --glass: rgba(9, 27, 26, 0.6); --glass-strong: rgba(6, 20, 19, 0.82);
  --accent: #4fc3bf; --accent-hover: #6fd6d2; --accent-press: #33928f;
  --accent-grad: linear-gradient(135deg, #4fc3bf 0%, #2b7a78 100%);
  --focus: #4fc3bf; --blue-450: #2f8583;
  --glow-core: rgba(69, 179, 175, 0.36); --glow-soft: rgba(69, 179, 175, 0.16); --backdrop-tint: rgba(69, 179, 175, 0.28);
}
/* Ente Keralam — heavy deep brown field, warm amber accent */
body[data-brand="ente-keralam"] {
  --ink-blue-900: #120b06; --ink-blue-850: #170e08; --ink-blue-800: #1d120a; --ink-blue-700: #26180e; --ink-blue-600: #302013; --ink-blue-500: #48311d;
  --bg: var(--ink-blue-800); --bg-deep: var(--ink-blue-900); --panel: var(--ink-blue-700); --panel-raised: var(--ink-blue-600);
  --glass: rgba(29, 18, 10, 0.6); --glass-strong: rgba(21, 13, 7, 0.82);
  --accent: #d99a5f; --accent-hover: #e8b57a; --accent-press: #aa7143;
  --accent-grad: linear-gradient(135deg, #d99a5f 0%, #8a5a34 100%);
  --focus: #d99a5f; --blue-450: #96653c;
  --glow-core: rgba(217, 154, 95, 0.34); --glow-soft: rgba(138, 90, 52, 0.20); --backdrop-tint: rgba(217, 154, 95, 0.24);
}
/* Benjarong — heavy teak green field, Thai gold accent */
body[data-brand="benjarong"] {
  --ink-blue-900: #0c0f0a; --ink-blue-850: #10140d; --ink-blue-800: #141a11; --ink-blue-700: #1a2216; --ink-blue-600: #222c1d; --ink-blue-500: #35452d;
  --bg: var(--ink-blue-800); --bg-deep: var(--ink-blue-900); --panel: var(--ink-blue-700); --panel-raised: var(--ink-blue-600);
  --glass: rgba(20, 26, 17, 0.6); --glass-strong: rgba(14, 19, 12, 0.82);
  --accent: #d5b06a; --accent-hover: #e6c586; --accent-press: #b28d4b;
  --accent-grad: linear-gradient(135deg, #d5b06a 0%, #8f7136 100%);
  --focus: #d5b06a; --blue-450: #9a7c42;
  --glow-core: rgba(213, 176, 106, 0.34); --glow-soft: rgba(47, 90, 70, 0.24); --backdrop-tint: rgba(213, 176, 106, 0.24);
}
/* Va Pho — heavy deep green field, gold accent */
body[data-brand="va-pho"] {
  --ink-blue-900: #07120c; --ink-blue-850: #0a170f; --ink-blue-800: #0d1c13; --ink-blue-700: #122619; --ink-blue-600: #183121; --ink-blue-500: #254a33;
  --bg: var(--ink-blue-800); --bg-deep: var(--ink-blue-900); --panel: var(--ink-blue-700); --panel-raised: var(--ink-blue-600);
  --glass: rgba(13, 28, 19, 0.6); --glass-strong: rgba(9, 20, 14, 0.82);
  --accent: #eaa842; --accent-hover: #f6c063; --accent-press: #c9852a;
  --accent-grad: linear-gradient(135deg, #eaa842 0%, #2f6f4f 100%);
  --focus: #eaa842; --blue-450: #3e8a63;
  --glow-core: rgba(234, 168, 66, 0.32); --glow-soft: rgba(47, 111, 79, 0.30); --backdrop-tint: rgba(234, 168, 66, 0.22);
}
/* Malabar Point — heavy dark brown field, orange accent */
body[data-brand="malabar-point"] {
  --ink-blue-900: #120c07; --ink-blue-850: #171008; --ink-blue-800: #1c140a; --ink-blue-700: #251b0e; --ink-blue-600: #302312; --ink-blue-500: #48351c;
  --bg: var(--ink-blue-800); --bg-deep: var(--ink-blue-900); --panel: var(--ink-blue-700); --panel-raised: var(--ink-blue-600);
  --glass: rgba(28, 20, 10, 0.6); --glass-strong: rgba(20, 14, 7, 0.82);
  --accent: #ee8f34; --accent-hover: #f9a957; --accent-press: #c76f1e;
  --accent-grad: linear-gradient(135deg, #ee8f34 0%, #9c5514 100%);
  --focus: #ee8f34; --blue-450: #b06a24;
  --glow-core: rgba(238, 143, 52, 0.32); --glow-soft: rgba(58, 105, 66, 0.24); --backdrop-tint: rgba(238, 143, 52, 0.22);
}

/* ----------------------------------------------------------------------------
   ALL brand pages: text is white. Neutralise the blue text/line tokens so the
   eyebrows, labels, the top menu / header and everything else read white and
   match the colour field. Accent stays coloured (it is used only for fills).
   -------------------------------------------------------------------------- */
body[data-brand] {
  --ink: #ffffff;
  --ink-dim: rgba(255, 255, 255, 0.86);
  --mut: rgba(255, 255, 255, 0.66);
  --faint: rgba(255, 255, 255, 0.56);
  --blue-100: #ffffff; --blue-150: #ffffff; --blue-200: rgba(255, 255, 255, 0.80); --blue-300: rgba(255, 255, 255, 0.72);
  --line: rgba(255, 255, 255, 0.12); --line-strong: rgba(255, 255, 255, 0.24);
}
/* the ghost (Back) button hover is a hardcoded blue site-wide — keep it white here */
body[data-brand] .btn--ghost:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.08); }