/* =========================================================
   YOUTHING DRIPS — DESIGN TOKENS v2
   Premium streetwear / editorial commerce
   Powered by Youthing Africa

   Three tiers. Components may only read tier 2 and 3.
     1. Primitives  (--p-*)   raw values, never used in components
     2. Semantic    (--*)     what a value MEANS (surface, text, action)
     3. Component   (--c-*)   per-component knobs

   Inverted (black) sections flip tier 2 with
   [data-surface="dark"] — no per-component dark overrides.
   ========================================================= */

:root {
  /* =======================================================
     1. PRIMITIVES
     ======================================================= */

  /* Brand — sampled from the logo */
  --p-blue: #40BBFF;
  --p-green: #7ED958;
  --p-black: #000000;

  /* Neutrals — cool concrete, sampled from the logo's own canvas (#E8E8E8) */
  --p-ink: #000000;
  --p-ink-900: #121212;
  --p-ink-800: #1F1F1F;
  --p-ink-700: #2E2E2E;
  --p-graphite-600: #4D4D4D;
  --p-graphite-500: #5E5E5E;  /* 5.3:1 on concrete */
  --p-graphite-300: #B3B3B3;
  --p-graphite-200: #CCCCCC;
  --p-concrete-200: #DADADA;
  --p-concrete: #E8E8E8;
  --p-white: #FFFFFF;

  --p-red: #C62828;
  --p-amber: #B88900;


  /* =======================================================
     2. SEMANTIC — light (default) surface
     ======================================================= */

  /* Surfaces */
  --surface-page: var(--p-concrete);
  --surface-raised: var(--p-white);
  --surface-sunken: var(--p-concrete-200);   /* product image wells */
  --surface-inverse: var(--p-ink);

  /* Text */
  --text-primary: var(--p-ink);
  --text-secondary: var(--p-graphite-600);  /* 7.2:1 on concrete */
  --text-muted: var(--p-graphite-500);      /* 5.3:1 on concrete */
  --text-inverse: var(--p-white);
  --text-on-accent: var(--p-black);      /* ONLY black goes on blue/green */

  /* Lines */
  --line-subtle: var(--p-graphite-200);
  --line-strong: var(--p-graphite-300);
  --line-contrast: var(--p-ink);

  /* Actions */
  --action-bg: var(--p-ink);
  --action-fg: var(--p-white);
  --action-bg-hover: var(--p-blue);
  --action-fg-hover: var(--p-black);

  /* Brand roles — semantic, not decorative
     BLUE  = interaction / energy  (hover, focus, active filter, links on dark)
     GREEN = newness / scarcity    (NEW, DROP, LOW STOCK, in-cart confirmation)
     Rule: blue/green are FILLS. Never text on a light surface (≈2:1, fails). */
  --accent-interact: var(--p-blue);
  --accent-new: var(--p-green);

  /* Status — success reuses brand green so the site never has two greens */
  --status-success: var(--p-green);
  --status-warning: var(--p-amber);
  --status-error: var(--p-red);

  /* Focus — visible on concrete AND black */
  --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--p-blue);

  /* Overlays (scrims for text over photography) */
  --scrim-hero: linear-gradient(180deg, rgb(0 0 0 / 0.35) 0%, rgb(0 0 0 / 0) 35%, rgb(0 0 0 / 0.55) 100%);
  --scrim-modal: rgb(10 10 10 / 0.55);


  /* =======================================================
     TYPOGRAPHY
     ONE variable family, two widths. Archivo's wdth axis gives
     a compressed display cut (62) and a normal text cut (100)
     that are clearly related — the logo supplies the "loud" face.
     ======================================================= */

  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --display-stretch: 62%;       /* font-stretch for display */
  --display-weight: 800;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Mobile-first fluid scale. Min values are sized for a 360px phone
     (v1 floor of 72px broke "WEAR THE MOVEMENT" onto 4 lines). */
  --text-display-xl: clamp(3.5rem, 1.6rem + 9.5vw, 10rem);
  --text-display-lg: clamp(2.75rem, 1.4rem + 6.5vw, 7rem);
  --text-display-md: clamp(2.25rem, 1.3rem + 4.5vw, 5rem);

  --text-h1: clamp(2rem, 1.4rem + 2.8vw, 3.5rem);
  --text-h2: clamp(1.625rem, 1.25rem + 1.8vw, 2.5rem);
  --text-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  --text-h4: 1.125rem;

  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-label: 0.75rem;
  --text-micro: 0.6875rem;

  --leading-display: 0.88;
  --leading-heading: 1.02;
  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-display: -0.02em;  /* condensed faces need less negative tracking */
  --tracking-heading: -0.015em;
  --tracking-body: 0;
  --tracking-label: 0.08em;
  --tracking-caps: 0.14em;


  /* =======================================================
     SPACE — 4px base
     ======================================================= */

  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-30: 7.5rem;
  --space-40: 10rem;

  /* Fluid layout — replaces the v1 "--page-padding-desktop gets
     reassigned to the mobile value" pattern, which lied about its name. */
  --gutter: clamp(1rem, 0.4rem + 3vw, 4rem);          /* 16 → 64 */
  --section-gap: clamp(4rem, 2.5rem + 6vw, 9rem);     /* 64 → 144 */
  --section-gap-tight: clamp(2.5rem, 1.8rem + 3vw, 5rem);
  --grid-gap: clamp(0.5rem, 0.3rem + 1vw, 1.5rem);    /* 8 → 24 */
  --grid-columns: 12;

  --container-max: 1600px;   /* editorial imagery wants room */
  --reading-max: 68ch;


  /* =======================================================
     RADIUS — street luxury is sharp. Images and buttons: 0.
     ======================================================= */

  --radius-none: 0;
  --radius-xs: 2px;     /* inputs, size chips */
  --radius-sm: 4px;     /* toasts */
  --radius-full: 9999px;/* bag count badge, swatches only */


  /* =======================================================
     BORDERS
     ======================================================= */

  --border-thin: 1px;
  --border-medium: 2px;
  --border-subtle: var(--border-thin) solid var(--line-subtle);
  --border-strong: var(--border-thin) solid var(--line-strong);
  --border-contrast: var(--border-thin) solid var(--line-contrast);


  /* =======================================================
     ELEVATION 
     Used for floating UI only (drawer, menus, toasts). Never cards.
     ======================================================= */

  --shadow-sm: 0 2px 8px rgb(0 0 0 / 0.08);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 0.10);
  --shadow-lg: 0 24px 64px rgb(0 0 0 / 0.16);
  --shadow-drawer: -16px 0 48px rgb(0 0 0 / 0.18);


  /* =======================================================
     MEDIA RATIOS
     ======================================================= */

  --ratio-product: 4 / 5;
  --ratio-editorial-tall: 3 / 4;
  --ratio-editorial-wide: 16 / 9;
  --ratio-hero-mobile: 4 / 5;
  --ratio-square: 1 / 1;


  /* =======================================================
     MOTION
     ======================================================= */

  --duration-instant: 100ms;
  --duration-fast: 160ms;
  --duration-normal: 260ms;
  --duration-medium: 420ms;
  --duration-slow: 700ms;
  --duration-reveal: 900ms;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* reveals, image zoom */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);      /* bag / menu sheets */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);              /* exits only */

  --stagger-step: 60ms;   /* product grid / headline line reveals */

  --transition-color:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
  --transition-transform: transform var(--duration-normal) var(--ease-out-expo);
  --transition-image:
    transform var(--duration-slow) var(--ease-out-expo),
    opacity var(--duration-medium) var(--ease-standard);


  /* =======================================================
     Z-INDEX
     ======================================================= */

  --z-base: 0;
  --z-content: 10;
  --z-sticky: 50;     /* sticky filter bar */
  --z-header: 100;
  --z-dropdown: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;


  /* =======================================================
     3. COMPONENT TOKENS
     ======================================================= */

  /* Header */
  --c-header-height: 64px;
  --c-island-top: 12px;
  --c-island-height: 56px;
  --c-header-bg: transparent;            /* over hero */
  --c-header-bg-scrolled: var(--surface-page);
  --c-announcement-height: 32px;         /* "FREE DELIVERY IN NAIROBI" strip */

  /* Buttons */
  --c-btn-height-sm: 40px;
  --c-btn-height-md: 48px;
  --c-btn-height-lg: 56px;
  --c-btn-pad-x: var(--space-6);
  --c-btn-radius: var(--radius-full);   /* pills: buttons are objects you press; photos stay sharp */

  /* Inputs */
  --c-input-height: 48px;
  --c-input-radius: var(--radius-xs);

  /* Size selector */
  --c-size-chip-height: 44px;            /* min touch target */
  --c-size-chip-selected-bg: var(--p-ink);
  --c-size-chip-selected-fg: var(--p-white);
  --c-size-chip-soldout-fg: var(--p-graphite-300);

  /* Product card */
  --c-card-image-bg: var(--surface-sunken);
  --c-card-info-gap: var(--space-3);
  --c-card-hover-scale: 1.03;

  /* Badges — the ONLY place green appears at rest */
  --c-badge-new-bg: var(--accent-new);
  --c-badge-new-fg: var(--text-on-accent);
  --c-badge-soldout-bg: var(--p-ink);
  --c-badge-soldout-fg: var(--p-white);
  --c-badge-height: 22px;

  /* Drawer (bag, mobile menu, filters) */
  --c-drawer-width: min(440px, 100vw);
  --c-drawer-bg: var(--surface-page);
}


/* =========================================================
   DESKTOP COMPONENT SIZES
   NOTE: custom properties cannot be used inside @media
   conditions. Breakpoints are documented here and must be
   written literally: 480 / 768 / 1024 / 1280 / 1536.
   ========================================================= */

@media (min-width: 1024px) {
  :root {
    --c-header-height: 76px;
  }
}


/* =========================================================
   INVERTED SURFACE
   <section data-surface="dark"> — hero, brand statement,
   editorial, final CTA, footer. Components need no changes.
   ========================================================= */

[data-surface="dark"] {
  --surface-page: var(--p-ink);
  --surface-raised: var(--p-ink-900);
  --surface-sunken: var(--p-ink-800);
  --surface-inverse: var(--p-concrete);

  --text-primary: var(--p-concrete);
  --text-secondary: #B5B0A8;
  --text-muted: #9A958D;
  --text-inverse: var(--p-ink);

  --line-subtle: var(--p-ink-700);
  --line-strong: #444240;
  --line-contrast: var(--p-concrete);

  --action-bg: var(--p-concrete);
  --action-fg: var(--p-ink);
  /* hover stays blue/black — it's the brand's signature moment */

  --focus-ring: 0 0 0 2px var(--p-ink), 0 0 0 4px var(--p-blue);

  background: var(--surface-page);
  color: var(--text-primary);
}


/* =========================================================
   BASE
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

img,
video {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

::selection {
  background: var(--p-blue);
  color: var(--p-black);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}