/* ==========================================================================
   HerTime Design Tokens  ·  v1.0
   Tier 1  Primitives  — raw brand values. Never use directly in components.
   Tier 2  Semantic    — roles (surface, text, action…). Use these in pages.
   Tier 3  Component   — per-component decisions built from semantic tokens.
   ========================================================================== */

:root {
  /* ---------- Tier 1 · Primitives ---------- */

  /* Plum (brand "Deep Plum" = 700) */
  --plum-950: #1E0B18;
  --plum-900: #2C1026;
  --plum-800: #3A1730;
  --plum-700: #4A1F3D;
  --plum-500: #7A3A66;

  /* Pink (brand "Active Pink" = 400) */
  --pink-300: #F29BB0;
  --pink-400: #E86B8A;
  --pink-600: #C2456A;   /* AA with white text */
  --pink-700: #9E2F52;   /* AA as text on light surfaces */

  /* Blush (brand "Soft Blush" = 100) */
  --blush-50:  #FDF3F5;
  --blush-100: #FAD7DF;

  /* Neutrals (brand "Neutral Grey" = 300, "Charcoal" = 900) */
  --white:    #FFFFFF;
  --grey-100: #F2F0F1;
  --grey-300: #D9D9D9;
  --grey-600: #5E5559;
  --grey-900: #222222;
  --ink-950:  #201E20;   /* matches the logo artwork background */

  /* Type families */
  --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-script:  "Dancing Script", "Brush Script MT", cursive;

  /* Type scale (fluid, 375px → 1440px) */
  --text-xs:   0.8125rem;                              /* 13 */
  --text-sm:   0.9375rem;                              /* 15 */
  --text-md:   1.0625rem;                              /* 17 body */
  --text-lg:   clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --text-2xl:  clamp(2.25rem, 1.6rem + 2.8vw, 4rem);
  --text-3xl:  clamp(3rem, 1.8rem + 5.4vw, 6.5rem);

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   800;

  --leading-tight: 0.92;
  --leading-snug:  1.2;
  --leading-body:  1.65;

  --tracking-tight: -0.01em;
  --tracking-label: 0.22em;     /* "W O M E N ' S   F I T N E S S" */
  --tracking-wide:  0.36em;

  /* 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;
  --space-section: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* Radii — brand is angular; keep corners tight */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgb(30 11 24 / 0.08);
  --shadow-md: 0 8px 24px rgb(30 11 24 / 0.14);
  --shadow-lg: 0 24px 60px rgb(30 11 24 / 0.28);

  /* Motion */
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 600ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --container: 72rem;           /* 1152px */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* Z-index scale */
  --z-base: 1;
  --z-header: 30;
  --z-toast: 50;

  /* ---------- Tier 2 · Semantic ---------- */

  --surface-page:     var(--blush-50);
  --surface-raised:   var(--white);
  --surface-soft:     var(--blush-100);
  --surface-inverse:  var(--ink-950);
  --surface-brand:    var(--plum-700);
  --surface-brand-deep: var(--plum-900);

  --text-strong:      var(--grey-900);
  --text-body:        #3B3236;
  --text-muted:       var(--grey-600);
  --text-on-inverse:  var(--white);
  --text-on-inverse-muted: #CFC6CB;
  --text-accent:      var(--pink-700);      /* accent text on light */
  --text-accent-on-dark: var(--pink-400);   /* accent text on dark/plum */

  --action-primary-bg:       var(--pink-600);
  --action-primary-bg-hover: var(--pink-700);
  --action-primary-text:     var(--white);
  --action-secondary-border: currentColor;

  --border-subtle:    rgb(74 31 61 / 0.14);
  --border-on-dark:   rgb(255 255 255 / 0.18);
  --focus-ring:       var(--pink-400);
  --rule-accent:      var(--pink-400);

  /* ---------- Tier 3 · Component ---------- */

  --btn-height: 3rem;                 /* ≥ 44px touch target */
  --btn-padding-x: var(--space-5);
  --btn-radius: var(--radius-sm);
  --btn-font: var(--weight-bold) var(--text-sm) / 1 var(--font-display);
  --btn-tracking: 0.14em;

  --chip-bg: rgb(232 107 138 / 0.16);
  --chip-text: var(--pink-300);
  --chip-border: rgb(232 107 138 / 0.45);

  --card-bg: var(--surface-raised);
  --card-radius: var(--radius-md);
  --card-border: var(--border-subtle);
  --card-padding: var(--space-5);

  --icon-size: 2.5rem;
  --icon-stroke: 1.6;
  --icon-color: var(--pink-600);
}