/* ==========================================================================
   LIVSDO — Design tokens
   The single source of truth for colour, type, spacing and motion.
   Nothing below this file should contain a raw hex value or a magic px size.
   ========================================================================== */

:root {
  /* ---- Brand palette (fixed — supplied by the brand) ---------------------- */
  --c-blue:  #0150EA;   /* primary accent, links, selected states, key CTAs   */
  --c-navy:  #021F63;   /* header, strong text, dark sections                 */
  --c-lime:  #BCEF2E;   /* accent highlights only — never a page background   */
  --c-white: #FFFFFF;
  --c-black: #000000;

  /* ---- Derived neutrals -------------------------------------------------- */
  /* Biased toward the navy rather than a neutral grey, so the greys read as
     chosen rather than inherited. All text values measured against white:
     ink 15.23:1, muted 5.09:1, blue 6.29:1 — all AA. */
  --c-ink:        var(--c-navy);
  --c-muted:      #5F6E91;
  --c-muted-soft: #7F8FB5;   /* decorative / disabled only, not body text     */
  --c-hairline:   #D9E2F7;
  --c-tint:       #F7F9FF;   /* image wells, empty states                     */
  --c-tint-deep:  #E9EEFC;
  --c-navy-deep:  #01184D;   /* pressed state on navy surfaces                */
  --c-blue-deep:  #013FBC;   /* hover/pressed on blue surfaces                */

  /* On-dark text */
  --c-on-dark:       rgba(255, 255, 255, 0.92);
  --c-on-dark-muted: rgba(255, 255, 255, 0.68);

  /* Feedback — kept distinct from the brand accent so state never reads as
     decoration. Both measured AA on white. */
  --c-danger:  #C02637;
  --c-success: #17734E;

  /* ==== Type ===============================================================
     Two families, and only two.

     Plus Jakarta Sans carries the display layer — the hero, section headings,
     the collection title, the product name. Slightly geometric and modern; it
     sits at 600 rather than 700, because the premium feel comes from scale and
     whitespace, not from weight. Large sizes need negative tracking, which is
     what --ls-display and --ls-hero supply; small text must NOT inherit it.

     Inter carries everything functional — navigation, body copy, product names
     and prices, buttons, specs, forms, cart, checkout and the footer. It is
     drawn for screen UI at small sizes, which is exactly what most of this
     interface is.
     ========================================================================= */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid sizes, so headline scaling needs no media queries and a long
     heading cannot overflow its container on the way down. */
  --fs-display: clamp(2.5rem, 1.6rem + 3.9vw, 4.75rem);     /* 40 → 76  hero */
  --fs-h1:      clamp(2rem, 1.55rem + 2vw, 3.5rem);         /* 32 → 56  collection title */
  --fs-h2:      clamp(1.875rem, 1.55rem + 1.55vw, 3rem);    /* 30 → 48  section heading */
  --fs-h3:      clamp(1.125rem, 1rem + 0.6vw, 1.5rem);      /* 18 → 24  sub-heading */
  /* Reading scale. Raised one step across the board for legibility — the
     headings above are deliberately NOT part of this change, so the type
     hierarchy tightens slightly and the running text carries more weight. */
  --fs-lg:      1.1875rem;   /* 19 — lead paragraphs */
  --fs-base:    1.0625rem;   /* 17 — body, long-form copy */
  --fs-sm:      0.9375rem;   /* 15 — paragraphs, list items, product names, cart */
  --fs-xs:      0.875rem;    /* 14 — navigation, captions, specs */
  /* Left at 12: these are uppercase and letter-spaced (buttons, eyebrows,
     breadcrumbs, micro-labels), where tracked capitals already read a size
     larger than their nominal value. */
  --fs-2xs:     0.75rem;     /* 12 — buttons and uppercase micro-labels */

  --lh-tight:   1.05;   /* hero */
  --lh-snug:    1.15;   /* headings */
  --lh-heading: 1.3;    /* sub-headings */
  --lh-body:    1.6;

  /* Uppercase micro-labels need positive tracking to stay legible at 12px. */
  --ls-label: 0.12em;
  --ls-wide:  0.18em;
  /* Negative tracking belongs to display sizes only — never to body or labels. */
  --ls-display: -0.03em;
  --ls-hero:    -0.04em;

  /* The single weight every display heading uses. */
  --fw-display: 600;

  /* ---- Space ------------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* Page gutter and section rhythm both scale with the viewport, which is what
     keeps the layout feeling editorial on a laptop and not cramped on a phone. */
  --gutter:      clamp(1rem, 0.4rem + 2.6vw, 3rem);
  --section-y:   clamp(3rem, 1.9rem + 4.6vw, 5.5rem);
  --container:   1440px;
  --measure:     68ch;       /* readable line length for long-form copy */

  /* ---- Lines, radius, elevation ------------------------------------------ */
  /* Deliberately close to square. Radius is spent on controls, not on every
     surface — rounded cards everywhere is the look the brief rules out. */
  --radius-0:  0;
  --radius-sm: 2px;
  --radius-pill: 999px;
  --border: 1px solid var(--c-hairline);
  --border-strong: 1px solid var(--c-navy);

  --shadow-raise: 0 6px 24px rgba(2, 31, 99, 0.10);
  --shadow-pop:   0 12px 40px rgba(2, 31, 99, 0.16);

  /* ---- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.18s;
  --t-med:  0.28s;
  --t-slow: 0.5s;

  /* ---- Layers ------------------------------------------------------------ */
  --z-sticky-bar: 400;
  --z-header:     500;
  --z-overlay:    600;
  --z-drawer:     700;
  --z-toast:      800;
}

/* The storefront commits to a single light visual world — a dark mode is not
   part of the supplied direction. Declaring the scheme stops the browser from
   auto-darkening form controls and scrollbars against the light palette. */
:root { color-scheme: light; }

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0.01ms; --t-med: 0.01ms; --t-slow: 0.01ms; }
}