/* ==========================================================================
   SPRK — 01. DESIGN TOKENS
   Single source of truth. Never hard-code a hex / size that lives here.
   ========================================================================== */

:root {
  /* ---------- Brand colour ---------------------------------------------- */
  --navy-900: #0A1A2B;  /* deepest — hero, footer floor            */
  --navy-800: #0E2A47;  /* brand navy — dark sections, headings    */
  --navy-700: #14375C;  /* raised navy — cards on navy             */
  --navy-600: #1B4570;

  --ink:      #10151B;  /* near-black — text on amber              */
  --steel:    #3C4A57;  /* subheads, icons                          */

  --amber-500: #F5A21A; /* THE accent. Only on things to be clicked */
  --amber-600: #D8890A; /* accent hover                             */
  --amber-100: #FDF1DC;
  --amber-glow: rgba(245, 162, 26, .38);

  --green-500: #1E9E5A; /* in-stock badge — use sparingly           */

  --bg:        #F5F6F8; /* alternating light ground                 */
  --bg-2:      #ECEFF3; /* one step deeper                          */
  --surface:   #FFFFFF;
  --line:      #E4E7EB;
  --line-dark: rgba(255, 255, 255, .12);

  --text:      #2B333B;
  --muted:     #6B7580;
  --muted-dark:#A9B4C0; /* muted on navy                            */
  --logo-grey: #404040; /* exact colour of the sprk-logo210 artwork — light backgrounds only */

  /* ---------- Type ------------------------------------------------------- */
  --font-head: "Barlow Condensed", "Barlow", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Barlow", ui-monospace, "Cascadia Mono", monospace;
  --font-ar:   "Tajawal", "Almarai", var(--font-body);

  /* Fluid scale — 375px → 1440px */
  --fs-display: clamp(2.75rem, 1.35rem + 6.1vw, 5rem);      /* 44 → 80  */
  --fs-h1:      clamp(2.125rem, 1.2rem + 4.05vw, 3.5rem);   /* 34 → 56  */
  --fs-h2:      clamp(1.75rem, 1.28rem + 2.05vw, 2.5rem);   /* 28 → 40  */
  --fs-h3:      clamp(1.25rem, 1.14rem + 0.47vw, 1.5rem);   /* 20 → 24  */
  --fs-h4:      clamp(1.125rem, 1.09rem + 0.16vw, 1.25rem); /* 18 → 20  */
  --fs-lead:    clamp(1.0625rem, 1rem + 0.34vw, 1.25rem);   /* 17 → 20  */
  --fs-body:    clamp(1rem, 0.985rem + 0.06vw, 1.0625rem);  /* 16 → 17  */
  --fs-sm:      0.875rem;                                    /* 14       */
  --fs-xs:      0.75rem;                                     /* 12       */
  --fs-btn:     0.9375rem;                                   /* 15       */

  --lh-tight: 1.05;
  --lh-head:  1.15;
  --lh-body:  1.7;

  --ls-tight:  -0.5px;
  --ls-label:   0.14em;
  --ls-btn:     0.05em;

  /* ---------- Space ------------------------------------------------------ */
  --s-1:  4px;   --s-2:  8px;   --s-3:  12px;  --s-4:  16px;
  --s-5:  20px;  --s-6:  24px;  --s-7:  32px;  --s-8:  40px;
  --s-9:  48px;  --s-10: 56px;  --s-11: 64px;  --s-12: 80px;
  --s-13: 96px;  --s-14: 120px;

  --section-y: clamp(3.5rem, 1.9rem + 6.8vw, 6rem);  /* 56 → 96 */
  --wrap:      1240px;
  --gutter:    clamp(1.25rem, 0.9rem + 1.5vw, 1.5rem);
  --grid-gap:  24px;

  /* ---------- Shape ------------------------------------------------------ */
  --r-card: 10px;
  --r-btn:  6px;
  --r-pill: 999px;
  --r-sm:   4px;

  --shadow-sm: 0 2px 8px rgba(14, 42, 71, .06);
  --shadow-md: 0 8px 24px rgba(14, 42, 71, .08);
  --shadow-lg: 0 18px 48px rgba(14, 42, 71, .14);
  --shadow-amber: 0 12px 30px rgba(245, 162, 26, .28);

  /* ---------- Motion ------------------------------------------------------ */
  --ease-out:  cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --t-fast: .18s;
  --t:      .3s;
  --t-slow: .55s;

  /* ---------- Layers ------------------------------------------------------ */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-mega: 210;
  --z-drawer: 300;
  --z-fab: 400;
  --z-loader: 900;

  /* ---------- Header metrics (JS reads these) ---------------------------- */
  --header-h: 80px;
  --header-h-scrolled: 64px;
  --topbar-h: 40px;
}

/* Fine paper grain reused on dark sections — kills the flat "AI gradient" look */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}