/* ============================================================
   Roosma — Brand foundation (fonts + CSS variables)
   EDIT THIS FILE to change brand colours site-wide.
   ============================================================ */

/* Baloo 2 — logo font (loaded from Google Fonts) */
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@700&display=swap");

/* Local fonts — uploaded with the theme */
@font-face{font-family:"Comfortaa";font-weight:300;font-display:swap;src:url("../fonts/Comfortaa-Light.ttf") format("truetype");}
@font-face{font-family:"Comfortaa";font-weight:400;font-display:swap;src:url("../fonts/Comfortaa-Regular.ttf") format("truetype");}
@font-face{font-family:"Comfortaa";font-weight:700;font-display:swap;src:url("../fonts/Comfortaa-Bold.ttf") format("truetype");}
@font-face{font-family:"Quicksand";font-weight:300;font-display:swap;src:url("../fonts/Quicksand-Light.otf") format("opentype");}
@font-face{font-family:"Quicksand";font-weight:400;font-display:swap;src:url("../fonts/Quicksand-Book.otf") format("opentype");}
@font-face{font-family:"Quicksand";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/Quicksand-Book-Oblique.otf") format("opentype");}
@font-face{font-family:"Quicksand";font-weight:700;font-display:swap;src:url("../fonts/Quicksand-Bold.otf") format("opentype");}
@font-face{font-family:"Quicksand";font-style:italic;font-weight:700;font-display:swap;src:url("../fonts/Quicksand-Bold-Oblique.otf") format("opentype");}
@font-face{font-family:"Quicksand Dash";font-weight:400;font-display:swap;src:url("../fonts/Quicksand-Dash.otf") format("opentype");}

/* ── BRAND TOKENS ─────────────────────────────────────────────────
   Change these to rebrand the entire site. */
:root{
  --font-display:"Comfortaa","Nunito",system-ui,sans-serif;
  --font-body:"Quicksand","Nunito",system-ui,sans-serif;
  --font-dash:"Quicksand Dash","Quicksand",system-ui,sans-serif;
  --font-logo:"Baloo 2","Comfortaa","Nunito",system-ui,sans-serif;

  /* Brand orange — the main accent */
  --orange:#E76A2C;
  --orange-deep:#C9521B;
  --orange-soft:#F4A266;

  /* Warm neutrals — Roosma never uses grey */
  --ink:#241c14;           /* main text */
  --ink-soft:#4a3f33;      /* body copy */
  --mute:#8a7d6c;          /* secondary text */
  --cream:#F8EFE5;         /* page background */
  --paper:#FFFBF5;         /* card background */
  --line:#E7D9C6;          /* borders */
  --black:#1a1410;

  /* Orange palette (o-50 to o-900) */
  --o-50:#FFF1E5;
  --o-100:#FBD9BD;
  --o-200:#F5B580;
  --o-300:#EE8E45;
  --o-400:#E76A2C;         /* = --orange */
  --o-500:#D85117;
  --o-600:#B8410C;
  --o-700:#8C2A05;
  --o-800:#5C1A03;
  --o-900:#2E0D02;

  /* Product colours (used by JS — override in Roosma Brand Settings per product) */
  --basaar:#E84B2F;  --basaar-label:#F0A24E;
  --bhaji:#E8852A;   --bhaji-label:#C5247C;
  --fish:#2EC4B0;    --fish-label:#0E5C56;
  --garam:#D8C5A0;   --garam-label:#241c14;
  --seekh:#2F5233;   --seekh-label:#7D3A5C;

  /* Animation easing */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* Grain texture overlay (CSS-only, no image file needed) */
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/></svg>");
}

/* ── RESETS ────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--cream);color:var(--ink);}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--orange);color:#fff;}

/* Shared utility */
.pill{display:inline-flex;align-items:center;gap:.5em;border-radius:999px;font-family:var(--font-body);font-weight:700;line-height:1;}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}