/* ==========================================================================
   MIA STOREFRONT — DESIGN TOKENS
   Defaults ship with the first production client's palette; every colour
   here is overridden per store by Customizer → Storefront → Colours (see
   mias_customizer_css(), which emits --mias-* after this file so those
   values win). Scale, spacing rhythm, uppercase letterspaced labels and the
   restrained radii are the theme's own and are not per-client.
   ========================================================================== */

:root {

  /* ── BRAND ────────────────────────────────────────────────────────────── */
  --mias-black:            #2E2E2E;   /* primary anchor, buttons, nav          */
  --mias-black-hover:      #1A1A1A;
  --mias-pink:             #CA0057;   /* accent: active nav, sale, links       */
  --mias-pink-hover:       #B0004C;
  --mias-pink-soft:        #FFD7E6;
  --mias-red:              #A3072F;   /* urgency / limited only                */

  /* ── NEUTRALS ─────────────────────────────────────────────────────────── */
  --mias-white:            #FFFFFF;
  --mias-background:       #FAF8F6;   /* warm page ground                      */
  --mias-surface:          #F4F1ED;   /* product-image backdrop, panels        */
  --mias-surface-soft:     #FBF0F4;   /* faint pink tint                       */
  --mias-border:           #E4DED8;
  --mias-border-strong:    #CFC7BE;

  /* ── TEXT ─────────────────────────────────────────────────────────────── */
  --mias-text-primary:     #2E2E2E;
  --mias-text-secondary:   #5A5250;
  --mias-text-muted:       #8A817B;
  --mias-text-on-dark:     #FFFFFF;

  /* ── STATE ────────────────────────────────────────────────────────────── */
  --mias-success:          #1F7A4D;
  --mias-error:            #B3261E;
  /* WhatsApp brand green — retained as a token but no longer painted on
     any button. WhatsApp actions use pink-on-white so they sit beside the
     pink primary without two competing saturated colours. Kept in case a
     future context genuinely needs the official green. */
  --mias-whatsapp:         #25D366;
  --mias-whatsapp-dark:    #1DA851;

  /* ── TYPE ─────────────────────────────────────────────────────────────── */
  /* Jost is the incumbent UI face on the live site and is geometric enough
     to carry the reference design's uppercase letterspaced labels; Playfair
     stays for editorial headings. One swap point if this ever changes.      */
  --mias-font-display:     'Playfair Display', Georgia, serif;
  --mias-font-ui:          'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --mias-w-regular:        400;
  --mias-w-medium:         500;
  --mias-w-semibold:       600;
  --mias-w-bold:           700;

  --mias-h1:               clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
  --mias-h2:               clamp(1.75rem, 1.35rem + 2vw, 3rem);
  --mias-h3:               clamp(1.375rem, 1.15rem + 1.1vw, 2rem);
  --mias-h4:               clamp(1.125rem, 1.03rem + 0.47vw, 1.5rem);
  --mias-h5:               clamp(1rem, 0.96rem + 0.2vw, 1.125rem);

  --mias-body-lg:          clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --mias-body:             0.9375rem;   /* 15 */
  --mias-body-sm:          0.8125rem;   /* 13 */
  --mias-label:            0.6875rem;   /* 11 — uppercase eyebrows/nav        */

  --mias-lh-tight:         1.15;
  --mias-lh-heading:       1.25;
  --mias-lh-body:          1.65;

  /* The reference design leans hard on wide-tracked uppercase for every
     label, nav item and button. This is the single most identifying
     typographic move in it.                                                */
  --mias-ls-label:         0.14em;
  --mias-ls-nav:           0.1em;
  --mias-ls-button:        0.12em;

  /* ── SPACING ──────────────────────────────────────────────────────────── */
  --mias-s1: 4px;  --mias-s2: 8px;   --mias-s3: 12px;  --mias-s4: 16px;
  --mias-s5: 24px; --mias-s6: 32px;  --mias-s7: 40px;  --mias-s8: 48px;
  --mias-s9: 64px; --mias-s10: 80px; --mias-s11: 96px; --mias-s12: 128px;

  --mias-section:          clamp(3rem, 2rem + 5vw, 6rem);
  --mias-section-lg:       clamp(4rem, 2.5rem + 7.5vw, 8rem);

  /* ── LAYOUT ───────────────────────────────────────────────────────────── */
  --mias-container:        1440px;
  --mias-container-wide:   1680px;
  --mias-container-narrow: 860px;
  --mias-gutter:           clamp(1rem, 0.5rem + 2.5vw, 3.5rem);

  --mias-header-h:         104px;
  --mias-header-h-mobile:  64px;

  /* ── RATIOS ───────────────────────────────────────────────────────────── */
  --mias-ratio-product:    3 / 4;
  --mias-ratio-editorial:  16 / 10;

  /* ── SURFACE ──────────────────────────────────────────────────────────── */
  /* Reference design is essentially square-cornered. Radius stays near zero
     deliberately; this is a visual signature, not an oversight.             */
  --mias-radius:           0px;
  --mias-radius-sm:        2px;
  --mias-shadow:           0 1px 2px rgba(46,46,46,0.05);
  --mias-shadow-lg:        0 8px 40px rgba(46,46,46,0.12);

  --mias-t:                200ms cubic-bezier(0.4, 0, 0.2, 1);
  --mias-t-slow:           320ms cubic-bezier(0.4, 0, 0.2, 1);

  --mias-touch:            44px;
  --mias-field-h:          48px;

  --mias-z-header:         100;
  --mias-z-mega:           90;
  --mias-z-drawer:         200;
  --mias-z-overlay:        190;
}

@media (prefers-reduced-motion: reduce) {
  :root { --mias-t: 0ms; --mias-t-slow: 0ms; }
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--mias-pink);
  outline-offset: 2px;
}