/* Girl's Boutique — Design Tokens
   OKLCH color, fluid type, motion. Single source of truth.
   Pink approximates the brief's #FF2D78 (exact value pending owner sign-off);
   tweak --c-pink here and it ripples everywhere. */

:root {
  /* ---- Color — Pink Flush theme (ported from the dripeable app) ----
     Three light levels that separate by COLOR, not just lightness:
     blush canvas < soft-pink card < white field. */
  --c-bg: #FDE3EE;                    /* soft-pink canvas (unified with surface) */
  --c-surface: #FDE3EE;               /* = canvas */
  --c-white: #FFFFFF;                 /* white field tier + light text on dark */
  --c-ink: #2A1118;                   /* plum-black text + footer bg */
  --c-ink-soft: oklch(0.50 0.035 350);/* muted plum captions */
  --c-line: oklch(0.86 0.035 350);    /* blush hairline borders */

  --c-pink: oklch(0.753 0.15 358);       /* signature pink (brightened +15% L) — single pink token, no separate "text" alias (fase 6a: removed --c-pink-text, was already == --c-pink, kept as one name to avoid confusion) */

  --c-blush: oklch(0.90 0.041 358);      /* "Nuevo" badge fill */
  --c-blush-soft: #FFFFFF;               /* card image field (white) */
  --c-band: oklch(0.84 0.105 352);       /* featured section band — deeper pink than the canvas */

  /* fase 6a: bolder/more saturated than the original pass — status pills read as muted at the old values */
  --c-success: oklch(0.58 0.15 155); /* available */
  --c-warn: oklch(0.65 0.17 75);     /* low_stock */
  --c-danger: oklch(0.52 0.19 25);   /* out_of_stock */

  /* ---- Typography ---- */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-ui: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 1rem + 1.1vw, 1.5rem);
  --fs-2xl: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem);
  --fs-3xl: clamp(2.25rem, 1.4rem + 4vw, 3.75rem);
  --fs-display: clamp(3rem, 1rem + 9vw, 7.5rem); /* oversize hero */

  /* ---- Fluid homepage display scale ----
     Each max == the original fixed-px 2K value, so the 2K design is the ceiling
     and everything scales DOWN to a ~360px floor. Tune the middle (vw) term in QA. */
  --fs-hero: clamp(2.75rem, 1rem + 9vw, 10rem);        /* anchors 160px */
  --fs-title: clamp(2rem, 1rem + 4vw, 5.5rem);         /* anchors 88px (section title) */
  --fs-title-sm: clamp(1.75rem, 1rem + 3vw, 4.25rem);  /* anchors 68px (featured title) */
  --fs-store: clamp(1.6rem, 1rem + 2.4vw, 3.25rem);    /* anchors 52px (brand-card name) */
  --fs-lead: clamp(1.125rem, 0.85rem + 0.95vw, 1.75rem); /* anchors 28px (section sub + link) */
  --fs-card-name: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); /* anchors 24px */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 600; /* scale consolidated to 400 / 600 / 800 (was 700) */
  --fw-black: 800;

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Fluid vertical rhythm for section blocks (anchors --space-9 = 6rem at 2K) */
  --section-pad: clamp(3rem, 7vw, 6rem);

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px oklch(0.23 0.025 358 / 0.08);
  --shadow-md: 0 12px 32px oklch(0.655 0.184 358 / 0.16); /* pink-tinted lift */

  /* ---- Motion ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 200ms var(--ease-out-expo);

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-wide: 1760px; /* header spreads to this on ultrawide */
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* ---- Dev: alignment guide overlay (remove before production) ---- */
  --c-guide: oklch(0.72 0.19 150);
  /* The breathing frame: fluid viewport inset used as the universal gutter and
     drawn by the dev guides. ~29px on a phone, 200px at 2K (the original frame). */
  --edge-gap: clamp(1.5rem, 8vw, 200px);
}