/* ============================================================
   "Ember & Flour" — design tokens for Pizza Oven Fire.
   The ONE place colours, type, spacing, radius, shadow and motion are defined.
   site.css / motion.css / toasts.css read these; nothing else hardcodes a value.
   ============================================================ */
:root {
    /* ---- Brand ---- */
    --color-primary-50:  #FCEFEB;
    --color-primary-100: #F8DDD5;
    --color-primary-600: #B3301B;   /* tomato-ember: white text 6.3:1 */
    --color-primary-700: #962614;   /* hover / pressed: white text 8.1:1 */
    --color-accent-100:  #FDF0DC;
    --color-accent-400:  #F2A541;   /* oven flame: fills + text on dark only */
    --color-accent-700:  #8A5510;   /* flame as TEXT on light (5.9:1) */
    --color-basil-100:   #E6EFE3;
    --color-basil-600:   #3D6B3A;   /* support only: veg / halal / open-now */

    /* ---- Neutrals: flour → oven charcoal ---- */
    --color-neutral-0:   #FFFFFF;
    --color-neutral-50:  #FBF8F3;
    --color-neutral-100: #F4EDE3;
    --color-neutral-200: #E9DFD2;
    --color-neutral-300: #D6C8B5;
    --color-neutral-400: #B8AA97;
    --color-neutral-500: #8C7D6C;   /* icons / decoration only (3.8:1) */
    --color-neutral-600: #6B5D50;   /* muted text 6.0:1 */
    --color-neutral-700: #4A3F37;
    --color-neutral-800: #2E2622;
    --color-neutral-900: #1C1714;

    /* ---- Semantic roles (use THESE in components) ---- */
    --color-primary:        var(--color-primary-600);
    --color-primary-hover:  var(--color-primary-700);
    --color-primary-soft:   var(--color-primary-50);
    --color-on-primary:     var(--color-neutral-0);
    --color-accent:         var(--color-accent-400);
    --color-accent-soft:    var(--color-accent-100);
    --color-on-accent:      var(--color-neutral-900);
    --color-success:        var(--color-basil-600);
    --color-success-soft:   var(--color-basil-100);
    --color-success-on-dark:#A9D4A2;
    --color-danger:         #A3261A;

    --color-bg:             var(--color-neutral-50);
    --color-bg-alt:         var(--color-neutral-100);
    --color-surface:        var(--color-neutral-0);
    --color-surface-dark:   var(--color-neutral-900);
    --color-surface-dark-2: var(--color-neutral-800);
    --color-border:         var(--color-neutral-200);
    --color-border-strong:  var(--color-neutral-300);
    --color-text:           var(--color-neutral-900);
    --color-text-2:         var(--color-neutral-700);
    --color-text-muted:     var(--color-neutral-600);
    --color-text-on-dark:   #FFF8EF;
    --color-text-on-dark-2: var(--color-neutral-300);
    --color-focus-ring:     rgba(179, 48, 27, .28);
    --color-scrim:          rgba(28, 23, 20, .55);
    --color-glow-flame:     rgba(242, 165, 65, .30);
    --color-glow-ember:     rgba(179, 48, 27, .42);
    /* translucent tints of the palette (on dark surfaces, overlays) */
    --color-on-dark-line:   rgba(255, 248, 239, .4);
    --color-on-dark-dim:    rgba(255, 248, 239, .3);
    --color-on-dark-hover:  rgba(255, 248, 239, .6);
    --color-on-dark-faint:  rgba(255, 248, 239, .05);
    --color-on-dark-dots:   rgba(255, 248, 239, .08);
    --color-flame-line:     rgba(242, 165, 65, .55);
    --color-success-on-dark-bg: rgba(61, 107, 58, .28);
    --color-primary-on-dark-bg: rgba(179, 48, 27, .3);
    --overlay-media:        rgba(28, 23, 20, .24);
    --overlay-strong:       rgba(28, 23, 20, .45);
    /* third-party brand colour (WhatsApp buttons) */
    --color-whatsapp:       #25D366;
    --color-whatsapp-ink:   #1DA851;

    /* ---- Typography ---- */
    --font-display-en: 'Bricolage Grotesque', 'Anek Bangla', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body-en:    'DM Sans', 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display-bn: 'Anek Bangla', 'Bricolage Grotesque', system-ui, sans-serif;
    --font-body-bn:    'Hind Siliguri', 'DM Sans', system-ui, sans-serif;
    --font-display:    var(--font-display-en);
    --font-body:       var(--font-body-en);
    --font-accent:     'Instrument Serif', Georgia, 'Times New Roman', serif;

    --fs-label: .8125rem;    /* 13px — uppercase UI labels, badges, chips */
    --fs-caption: .875rem;   /* 14px — captions / legal only */
    --fs-sm:   1rem;         /* 16px — the floor for any real text */
    --fs-base: 1.0625rem;    /* 17px — body */
    --fs-md:   1.1875rem;    /* 19px — lead */
    --fs-lg:   1.375rem;     /* 22px — card titles */
    --fs-xl:   clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
    --fs-2xl:  clamp(1.875rem, 1.35rem + 2.1vw, 2.875rem);
    --fs-3xl:  clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
    --fs-hero: clamp(2.5rem, 1.55rem + 4.4vw, 4.75rem);

    --lh-tight: 1.06;
    --lh-snug:  1.3;
    --lh-body:  1.65;
    --tracking-tight: -.02em;
    --tracking-label: .14em;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;

    /* ---- Spacing (4px base) ---- */
    --space-1: .25rem;  --space-2: .5rem;  --space-3: .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;  --space-20: 5rem;  --space-24: 6rem;
    --section-y:    clamp(4rem, 2.6rem + 5.5vw, 7.5rem);
    --section-y-sm: clamp(3rem, 2.2rem + 3vw, 4.5rem);
    --gutter: 1rem;

    /* ---- Radius ---- */
    --radius-sm: 8px;
    --radius-btn: 12px;
    --radius-md: 14px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --radius-arch: 999px 999px var(--radius-lg) var(--radius-lg);   /* the oven mouth */

    /* ---- Shadows (warm-tinted) ---- */
    --shadow-1: 0 1px 2px rgba(28, 23, 20, .06), 0 1px 1px rgba(28, 23, 20, .04);
    --shadow-2: 0 14px 32px -14px rgba(28, 23, 20, .26);
    --shadow-3: 0 30px 70px -26px rgba(28, 23, 20, .45);
    --shadow-primary: 0 10px 22px -10px rgba(179, 48, 27, .65);
    --shadow-nav: 0 10px 30px -18px rgba(28, 23, 20, .35);
    --shadow-badge: 0 6px 14px -6px rgba(28, 23, 20, .45);
    --shadow-dock: 0 -10px 30px -20px rgba(28, 23, 20, .45);

    /* ---- Controls ---- */
    --control-h: 48px;
    --control-h-sm: 40px;
    --border-w: 1.5px;

    /* ---- Motion: "slow warmth" ---- */
    --ease-out: cubic-bezier(.2, .7, .2, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-fast: .2s;
    --dur-base: .45s;
    --dur-slow: .7s;
    --dur-reveal: .6s;
    --stagger: 70ms;
    --lift: -4px;
    --zoom: 1.04;

    /* ---- Layers ---- */
    --z-sticky: 1030;
    --z-float: 1032;
    --z-dock: 1035;
    --z-cookie: 1040;
    --z-toast: 2000;

    /* ---- Mobile action dock ---- */
    --dock-h: 64px;

    /* ---- Legacy aliases: inline styles in older views use --rp-*; keep them pointing at the system ---- */
    --rp-primary: var(--color-primary);
    --rp-primary-dark: var(--color-primary-hover);
    --rp-accent: var(--color-accent);
    --rp-dark: var(--color-surface-dark);
    --rp-cream: var(--color-bg);
    --rp-cream-2: var(--color-bg-alt);
    --rp-ink: var(--color-text);
    --rp-muted: var(--color-text-muted);
    --rp-border: var(--color-border);
    --rp-green: var(--color-success);
    --rp-serif: var(--font-display);
    --rp-sans: var(--font-body);
    --rp-bn: var(--font-body-bn);
}

/* Bengali pages: Bengali faces first so conjuncts render in the designed font. */
html[lang="bn"] {
    --font-display: var(--font-display-bn);
    --font-body: var(--font-body-bn);
    --tracking-tight: 0;
    --tracking-label: 0;
}