/* =============================================================================
   Miaustore 2026 — Design Tokens (WordPress port)

   Source of truth, in priority order:
     1. brand-assets/BRANDGUIDE/Miaustore Brand Guidelines_March2026.pdf
     2. design/sandbox-site/src/styles/tokens.css  (the Astro implementation)

   Every colour below was read off slide 9 of the brand guide and cross-checked
   against the Astro tokens — they agree exactly, so these six hexes are
   authoritative.

   TOKENS ARE LAW: downstream CSS references the SEMANTIC layer (§2). Primitives
   exist so semantics can be retargeted without a find-and-replace.

   ---------------------------------------------------------------------------
   ⚠️ ROOT FONT-SIZE — DELIBERATE DIVERGENCE FROM THE ASTRO REFERENCE
   ---------------------------------------------------------------------------
   The Astro project sets `html { font-size: 125% }` so that 1rem = 20px, and its
   whole scale is expressed in rem against that.

   We CANNOT do that here. This is an existing WordPress site: the X theme,
   WooCommerce, Cornerstone and ~150 plugins all ship CSS written against the
   browser default 16px root. Changing the root would rescale every one of them
   at once.

   So the scale below is recomputed for a 16px root. The RENDERED PIXEL SIZES ARE
   IDENTICAL to the Astro reference — only the rem arithmetic differs. The px
   equivalent is in a comment on every line. If you are diffing against the Astro
   tokens, compare the comments, not the numbers.

   Do not "restore" 125% to make the files match. It would break the site.
   ============================================================================= */

:root {
  /* ==========================================================================
     1. COLOUR — primitives
     Brand guide slide 9 defines six named colours. The 50–900 ramps around them
     are from the Astro reference and exist for hovers, borders and disabled
     states; the brand-guide colours are marked ★ and are the only ones that are
     officially "the brand".
     ========================================================================== */

  /* Orange — ★ 500 is brand ORANGE #FF6500 */
  --orange-50: #fff0e6;
  --orange-100: #ffcfb0;
  --orange-200: #ffb88a;
  --orange-300: #ff9854;
  --orange-400: #ff8433;
  --orange-500: #ff6500; /* ★ ORANGE */
  --orange-600: #e85c00;
  --orange-700: #b54800;
  --orange-800: #8c3800;
  --orange-900: #6b2a00;

  /* Electric blue — ★ 50 is brand BABY BLUE #E6F0FF, ★ 500 is ELECTRIC BLUE */
  --electric-blue-50: #e6f0ff; /* ★ BABY BLUE (a PRIMARY brand colour) */
  --electric-blue-100: #b0d0ff;
  --electric-blue-200: #8ab9ff;
  --electric-blue-300: #5498ff;
  --electric-blue-400: #3385ff;
  --electric-blue-500: #0066ff; /* ★ ELECTRIC BLUE */
  --electric-blue-600: #005de8;
  --electric-blue-700: #0048b5;
  --electric-blue-800: #00388c;
  --electric-blue-900: #002b6b;

  /* Navy blue — ★ 500 is brand NAVY BLUE #153055 */
  --navy-blue-50: #e8eaee;
  --navy-blue-100: #b6bfca;
  --navy-blue-200: #93a0b1;
  --navy-blue-300: #62748d;
  --navy-blue-400: #445977;
  --navy-blue-500: #153055; /* ★ NAVY BLUE */
  --navy-blue-600: #132c4d;
  --navy-blue-700: #0f223c;
  --navy-blue-800: #0c1a2f;
  --navy-blue-900: #091424;

  /* Midnight blue — ★ 500 is brand MIDNIGHT BLUE #0B192C (the primary colour) */
  --midnight-blue-50: #e7e8ea;
  --midnight-blue-100: #b3b8be;
  --midnight-blue-200: #8f959e;
  --midnight-blue-300: #5c6572;
  --midnight-blue-400: #3c4756;
  --midnight-blue-500: #0b192c; /* ★ MIDNIGHT BLUE */
  --midnight-blue-600: #0a1728;
  --midnight-blue-700: #08121f;
  --midnight-blue-800: #060e18;
  --midnight-blue-900: #050b12;

  /* Base + feedback */
  --offwhite: #fcfdff; /* ★ OFF-WHITE */
  --feedback-red: #ff0000;
  --feedback-green: #1ed027;

  /* ==========================================================================
     2. COLOUR — semantic roles. USE THESE, never the primitives above.
     ========================================================================== */

  /* Backgrounds */
  --ms-bg-page: var(--offwhite);
  --ms-bg-section: var(--electric-blue-50); /* baby-blue alternating band */
  --ms-bg-dark: var(--midnight-blue-500); /* nav / footer / dark panels */
  --ms-bg-card: #ffffff;

  /* Text */
  --ms-text-heading: var(--navy-blue-500); /* headings on LIGHT surfaces only */
  --ms-text-body: var(--midnight-blue-900);
  --ms-text-muted: var(--midnight-blue-300);
  --ms-text-on-dark: var(--offwhite);

  /* Accent */
  --ms-accent: var(--orange-500);

  /*
   * Buttons — the two intents are NOT interchangeable. Read off the Figma
   * (p07) and brand guide slide 16:
   *   orange   = marketing / promotional CTAs ("SHOP NOW", newsletter submit)
   *   electric = commerce actions ("Add to cart", checkout, cart controls)
   * Getting these backwards is the single easiest way to look off-brand.
   */
  --ms-btn-marketing: var(--orange-500);
  --ms-btn-marketing-hover: var(--orange-400);
  --ms-btn-commerce: var(--electric-blue-500);
  --ms-btn-commerce-hover: var(--electric-blue-600);
  --ms-disabled: var(--midnight-blue-100);

  /* Feedback + focus */
  --ms-error: var(--feedback-red);
  --ms-success: var(--feedback-green);
  --ms-focus-ring: var(--electric-blue-500);

  /* Borders */
  --ms-border: var(--midnight-blue-50);
  --ms-border-selected: var(--electric-blue-500);

  /* ==========================================================================
     3. TYPOGRAPHY
     Brand guide slides 10–12. Pearl Jean = display (H1–H3). Red Hat Display =
     everything else. Weight roles from slide 12 ("Typographic Execution"):
       H1/title  → Pearl Jean, default (400)
       Subtitle  → Medium 500
       Pre-title → Bold 700
       Body      → Regular 400
       Strong    → Black 900
       CTA       → Extra Bold 800
     ========================================================================== */

  --ms-font-display: 'Pearl Jean', 'Red Hat Display', system-ui, sans-serif;
  --ms-font-body: 'Red Hat Display', system-ui, -apple-system, sans-serif;

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

  /*
   * Fluid sizes: clamp(min @320px viewport, fluid, max @1080px).
   * Recomputed for a 16px root — see the header note. px values match Astro.
   */
  --ms-size-h1: clamp(3rem, 2.579rem + 2.105vw, 4rem); /* 48 → 64px */
  --ms-size-h2: clamp(2.5rem, 2.29rem + 1.053vw, 3rem); /* 40 → 48px */
  --ms-size-h3: clamp(2rem, 1.79rem + 1.053vw, 2.5rem); /* 32 → 40px */
  --ms-size-h4: 1.75rem; /* 28px */
  --ms-size-h5: 1.5rem; /* 24px */
  --ms-size-h6: clamp(1.25rem, 1.145rem + 0.526vw, 1.5rem); /* 20 → 24px */
  --ms-size-body-1: clamp(1rem, 0.895rem + 0.526vw, 1.25rem); /* 16 → 20px */
  --ms-size-body-2: clamp(0.875rem, 0.822rem + 0.263vw, 1rem); /* 14 → 16px */
  --ms-size-body-3: clamp(0.75rem, 0.697rem + 0.263vw, 0.875rem); /* 12 → 14px */
  --ms-size-label: 1rem; /* 16px */
  --ms-size-button: 1.25rem; /* 20px */
  --ms-size-nav: 1.125rem; /* 18px */
  --ms-size-footer: 1rem; /* 16px */

  --ms-lh-tight: 1.2;
  --ms-lh-snug: 1.4;
  --ms-lh-normal: 1.5;
  --ms-lh-none: 1;

  /* Pearl Jean reads best tight — Figma overrides the PDF's 3% tracking. */
  --ms-ls-display: 0;
  --ms-ls-heading: 0.02em;
  --ms-ls-body: 0.02em;
  --ms-ls-button: 0.05em;
  --ms-ls-flush: 0;

  /* ==========================================================================
     4. SPACING — 8px base scale (px values identical to Astro)
     ========================================================================== */
  --ms-space-1: 0.25rem; /* 4px */
  --ms-space-2: 0.5rem; /* 8px */
  --ms-space-3: 0.75rem; /* 12px */
  --ms-space-4: 1rem; /* 16px */
  --ms-space-5: 1.5rem; /* 24px */
  --ms-space-6: 2rem; /* 32px */
  --ms-space-7: 3rem; /* 48px */
  --ms-space-8: 4rem; /* 64px */
  --ms-space-9: 6rem; /* 96px */
  --ms-space-10: 8rem; /* 128px */

  /* ==========================================================================
     5. RADIUS
     ========================================================================== */
  --ms-radius-sm: 0.5rem; /* 8px */
  --ms-radius-md: 1rem; /* 16px */
  --ms-radius-lg: 1.5rem; /* 24px */
  --ms-radius-panel: 2.5rem; /* 40px — footer / dark panel top corners */
  --ms-radius-pill: 9999px;

  /* ==========================================================================
     6. LAYOUT + ELEVATION + MOTION
     ========================================================================== */
  --ms-container-max: 77.5rem; /* 1240px */
  --ms-container-gutter: var(--ms-space-5);

  --ms-shadow-card: 0 2px 8px rgba(11, 25, 44, 0.06), 0 8px 24px rgba(11, 25, 44, 0.06);
  --ms-shadow-card-hover: 0 4px 12px rgba(11, 25, 44, 0.1), 0 12px 32px rgba(11, 25, 44, 0.1);

  --ms-transition: 160ms ease;
}