/* =============================================================================
   SNEAKERA — Design Tokens (single source of truth for the build)
   Extracted from: brand/manual/The-Brand-Style-Guide-Sneakera.pdf (v1.0, Nov 2025)
   RECONCILED with Figma "Design" page (file u1nhxXLrqz8OJlMU4P3nOX) via Dev Mode MCP:
   site is DARK by default (surface #0f0f0f / text #f9f9f9); real type scale + glow
   shadows + deep brand shades below. Display font in Figma = Fractul (commercial demo);
   the web build substitutes Inter Tight per the Brand Guide.
   Usage: import this file first, then component CSS reads var(--sk-*).
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
     COLOR — core palette (Brand Guide §5.1)
     Hierarchy (§5.2): neutrals ~80% · Clean 10% · Protect 5% · Restore 5%
     --------------------------------------------------------------------------- */
  --sk-paper: #f9f9f9;   /* "White / Panna"  rgb(249,249,249) — default background */
  --sk-ink:   #0f0f0f;   /* "Black / Grafite" rgb(15,15,15)   — default text       */

  --sk-clean:   #36f0bf; /* Clean — The Wave   · mint / acqua futuristica  rgb(54,240,191)  */
  --sk-protect: #fcd67d; /* Protect — The K Shield · gold / giallo          rgb(252,214,125) */
  --sk-restore: #c4a6fc; /* Restore — The Arch · violet / lavanda           rgb(196,166,252) */
  /* NOTE: the PDF lists Protect RGB as 230/228/228 — that is a copy error; the
     authoritative value is the HEX fcd67d = rgb(252,214,125). */

  /* Deep brand shades (Figma color/brand/*/900) — for tinted dark section backgrounds */
  --sk-clean-900:   #102d25;
  --sk-protect-900: #2f250f;
  --sk-restore-900: #1a0f2e;

  /* Dark surface ramp (Figma color/semantic/*) — the site's real neutrals */
  --sk-surface:             #0f0f0f; /* page background */
  --sk-surface-subtle:      #1a1a1a; /* raised cards / alt sections */
  --sk-surface-card:        #282828; /* product cards / image cards (PDP) */
  --sk-surface-placeholder: #262626; /* nav pill / media placeholders */
  --sk-border-dark:         #3c3c3c; /* hairlines on dark */
  --sk-text-subtle:         #999999; /* muted text on dark */

  /* Light-mode neutrals (for any inverted/light section) */
  --sk-ink-700: #2b2b2b;
  --sk-ink-500: #5c5c5c;
  --sk-ink-300: #9a9a9a;
  --sk-ink-100: #e6e6e6;
  --sk-paper-pure: #ffffff;

  /* Accent shades (hover/borders) */
  --sk-clean-deep:   #15c79a;
  --sk-protect-deep: #e9b94a;
  --sk-restore-deep: #9d77f3;

  /* Semantic aliases — components reference THESE, not raw palette.
     DEFAULT = DARK (matches Figma). Use [data-theme="light"] to invert a section. */
  --sk-bg:        var(--sk-surface);
  --sk-fg:        var(--sk-paper);
  --sk-bg-invert: var(--sk-paper);
  --sk-fg-invert: var(--sk-ink);
  --sk-muted:     var(--sk-text-subtle);
  --sk-border:    var(--sk-border-dark);
  --sk-accent:    var(--sk-clean);   /* default accent; overridden per section */
  --sk-accent-fg: var(--sk-ink);     /* text on accent (approved: Black on Mint/Yellow) */

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY (Brand Guide §6.3 Web hierarchy)
     Brand/print fonts are Fractul + Neue Haas Grotesk Display (commercial,
     NOT bundled). The Guide itself prescribes Inter Tight + Inter for WEB.
     --------------------------------------------------------------------------- */
  --sk-font-display: "Inter Tight", "Fractul", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sk-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Optional, only if Fractul/Neue Haas are licensed & loaded for the live site */
  --sk-font-brand:   "Fractul", "Inter Tight", sans-serif;

  --sk-weight-body:      400;
  --sk-weight-body-emph: 500;
  --sk-weight-cta:       600;  /* CTA: Inter SemiBold (Figma type/web/cta) */
  --sk-weight-subhead:   700;  /* Sub-heading: Inter Bold (type/web/2xl) */
  --sk-weight-headline:  800;  /* Headline: Inter ExtraBold (type/web/4xl) */
  --sk-weight-display:   800;  /* Display (Fractul→Inter Tight 800) */

  --sk-tracking-headline: -0.026em; /* Figma letterSpacing/tighter = -2px @76 ≈ -0.026em */
  --sk-tracking-subhead:  -0.01em;
  --sk-tracking-body:     0;
  --sk-tracking-cta:      0.04em;   /* uppercase CTAs */

  --sk-leading-tight: 1;      /* Figma lineHeight/tighter = 100% */
  --sk-leading-snug:  1.1;
  --sk-leading-body:  1.55;

  /* Fluid type scale (clamp: min @360px → max @1440px). Maxes match Figma px sizes.
     display 96 · hero 76 · 4xl 49 · 2xl 31 · then a smooth ramp down. */
  --sk-text-xs:      0.75rem;  /* 12 — Figma type/web/xs */
  --sk-text-sm:      0.875rem; /* 14 — type/web/sm, cta */
  --sk-text-base:    clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);    /* ~16–17 */
  --sk-text-lg:      clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);  /* ~18–22 */
  --sk-text-xl:      clamp(1.375rem, 1.15rem + 1vw, 1.9375rem);   /* ~22–31 (web/2xl) */
  --sk-text-2xl:     clamp(1.75rem, 1.3rem + 2vw, 1.9375rem);     /* 31 — type/web/2xl */
  --sk-text-3xl:     clamp(2rem, 1.4rem + 2.6vw, 3.0625rem);      /* 49 — type/web/4xl */
  --sk-text-hero:    clamp(2.75rem, 1.6rem + 5.1vw, 4.75rem);     /* 76 — font/size/hero */
  --sk-text-display: clamp(3rem, 1.6rem + 6.2vw, 6rem);           /* 96 — font/size/display */

  /* ---------------------------------------------------------------------------
     SPACING — 4px base scale
     --------------------------------------------------------------------------- */
  --sk-space-1: 0.25rem;  /* 4  */
  --sk-space-2: 0.5rem;   /* 8  */
  --sk-space-3: 0.75rem;  /* 12 */
  --sk-space-4: 1rem;     /* 16 */
  --sk-space-5: 1.5rem;   /* 24 */
  --sk-space-6: 2rem;     /* 32 */
  --sk-space-7: 3rem;     /* 48 */
  --sk-space-8: 4rem;     /* 64 */
  --sk-space-9: 6rem;     /* 96 */
  --sk-space-10: 8rem;    /* 128 */
  --sk-section-y: clamp(4rem, 8vw, 9rem);  /* vertical rhythm between sections */

  /* ---------------------------------------------------------------------------
     LAYOUT & GRID — Figma desktop frame = 1440 wide, mobile = 390 wide.
     --------------------------------------------------------------------------- */
  --sk-grid-columns: 12;
  --sk-frame:             1440px;  /* Figma desktop artboard width */
  --sk-frame-content:     1328px;  /* hero stage width — header matches this for symmetry */
  --sk-container-wide:    1440px;  /* full-bleed content */
  --sk-container:         1280px;  /* default content max-width (≈ 1440 − 2×80 margin) */
  --sk-container-narrow:  840px;   /* text-heavy blocks */
  --sk-gutter:  clamp(16px, 2vw, 24px);
  --sk-margin:  clamp(20px, 5.5vw, 80px);  /* page side margin (desktop ≈ 80px) */

  /* ---------------------------------------------------------------------------
     RADIUS — "bordi morbidi" (soft, rounded)
     --------------------------------------------------------------------------- */
  --sk-radius-sm: 8px;
  --sk-radius-card: 12px;  /* Figma media/section cards */
  --sk-radius:    16px;
  --sk-radius-lg: 28px;
  --sk-radius-pill: 999px;

  /* ---------------------------------------------------------------------------
     ELEVATION / EFFECTS (site key items: blurred bg, glare, soft shadow)
     --------------------------------------------------------------------------- */
  --sk-shadow-sm: 0 2px 4px rgba(0,0,0,0.08);                 /* Figma shadow/sm */
  --sk-shadow:    0 6px 24px rgba(0,0,0,0.35);
  --sk-shadow-lg: 0 24px 60px rgba(0,0,0,0.5);
  --sk-blur:      16px;
  /* Colored glows (Figma shadow/colored/*) — accent pop on dark surfaces */
  --sk-glow-clean:   0 8px 20px -4px rgba(54,240,191,0.4);
  --sk-glow-protect: 0 8px 20px -4px rgba(252,214,125,0.4);
  --sk-glow-restore: 0 8px 20px -4px rgba(196,166,252,0.4);

  /* ---------------------------------------------------------------------------
     MOTION (smooth scrolling, custom cursor, before/after, fixed scroll)
     --------------------------------------------------------------------------- */
  --sk-ease:        cubic-bezier(0.22, 1, 0.36, 1);   /* easeOutQuint-ish */
  --sk-ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --sk-dur-fast: 160ms;
  --sk-dur:      320ms;
  --sk-dur-slow: 640ms;

  --sk-z-header: 1000;
  --sk-z-cursor: 9999;
}

/* =============================================================================
   PER-SECTION THEMING
   Set data-theme on a section to swap the accent (storyboard: Clean→Protect→Restore).
   Approved combos (§5.3): Black-on-Mint, Black-on-Yellow, Mint/White/Yellow-on-Black.
   ========================================================================== */
/* --sk-accent-ghost = tone-on-tone watermark color (between bg-900 and accent)
   --sk-accent-100/700 = badge bg / badge+selected text (Figma brand/*/100 & 700) */
[data-theme="clean"] {
  --sk-accent: var(--sk-clean);   --sk-accent-fg: var(--sk-ink);
  --sk-accent-900: var(--sk-clean-900);   --sk-accent-ghost: #174e3f; --sk-glow: var(--sk-glow-clean);
  --sk-accent-100: #e9f6f3; --sk-accent-700: #158467;
}
[data-theme="protect"] {
  --sk-accent: var(--sk-protect); --sk-accent-fg: var(--sk-ink);
  --sk-accent-900: var(--sk-protect-900); --sk-accent-ghost: #4e4020; --sk-glow: var(--sk-glow-protect);
  --sk-accent-100: #fdf1d4; --sk-accent-700: #8a6d1f;
}
[data-theme="restore"] {
  --sk-accent: var(--sk-restore); --sk-accent-fg: var(--sk-ink);
  --sk-accent-900: var(--sk-restore-900); --sk-accent-ghost: #34264d; --sk-glow: var(--sk-glow-restore);
  --sk-accent-100: #efe8fd; --sk-accent-700: #5b3fa0;
}

/* Inverted (light) section — rare; the site is dark by default */
[data-theme="light"] {
  --sk-bg: var(--sk-paper); --sk-fg: var(--sk-ink);
  --sk-bg-invert: var(--sk-ink); --sk-fg-invert: var(--sk-paper);
  --sk-muted: var(--sk-ink-500); --sk-border: var(--sk-ink-100);
}

@media (prefers-reduced-motion: reduce) {
  :root { --sk-dur-fast: 0ms; --sk-dur: 0ms; --sk-dur-slow: 0ms; }
}