/* ZEA Elite Performance — bundled design tokens (from tokens/*) */

/* ===== fonts.css =====
   Display: Oswald (athletic condensed). Body/UI: Archivo (modern grotesque).
   Loaded from Google Fonts. If you need offline/self-hosted binaries,
   replace this @import with local @font-face rules. */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Archivo:wght@400;500;600;700;800&display=swap');

/* ===== colors.css ===== */
/* ZEA Elite Performance — Color tokens
   Distribution target: 70% black · 15% off-white · 10% anthracite · 5% gold.
   Gold is reserved for emphasis: CTAs, fine borders, icons, prices, premium detail. */

:root {
  /* ---- Base palette ---- */
  --zea-black:          #000000;
  --zea-black-warm:     #050403;
  --zea-ink:            #0A0A0A; /* near-black surface */
  --zea-anthracite-900: #111111;
  --zea-anthracite-800: #1A1A1A;
  --zea-anthracite-700: #202020;
  --zea-anthracite:     #2B2B2B; /* complementary anthracite grey */
  --zea-anthracite-600: #3A3A3A;
  --zea-line:           #4A4A4A;

  --zea-off-white:      #F8F8F8;
  --zea-white:          #FFFFFF;

  --zea-gold:           #C8AA7F; /* champagne — the accent */
  --zea-gold-light:     #E3C497; /* highlight / reflection */
  --zea-gold-dark:      #AB9270; /* shadow / pressed */

  /* ---- Alpha ramps (off-white over black) ---- */
  --alpha-04: rgba(248, 248, 248, 0.04);
  --alpha-06: rgba(248, 248, 248, 0.06);
  --alpha-08: rgba(248, 248, 248, 0.08);
  --alpha-12: rgba(248, 248, 248, 0.12);
  --alpha-16: rgba(248, 248, 248, 0.16);
  --alpha-30: rgba(248, 248, 248, 0.30);
  --alpha-45: rgba(248, 248, 248, 0.45);
  --alpha-65: rgba(248, 248, 248, 0.65);

  --gold-08: rgba(200, 170, 127, 0.08);
  --gold-14: rgba(200, 170, 127, 0.14);
  --gold-24: rgba(200, 170, 127, 0.24);
  --gold-40: rgba(200, 170, 127, 0.40);
  --gold-60: rgba(200, 170, 127, 0.60);
  --bg-section-black: radial-gradient(130% 100% at 50% -10%, #141210 0%, #0a0908 42%, #000 100%);
  --bg-section-ink:   linear-gradient(180deg, #000 0%, #0b0a09 52%, #060505 100%);
  --bg-section-warm:  radial-gradient(120% 90% at 80% 10%, #17130d 0%, #000 58%);
  --bg-section-anthracite: repeating-linear-gradient(115deg, rgba(248,248,248,0.013) 0px, rgba(248,248,248,0.013) 1px, transparent 1px, transparent 56px), linear-gradient(180deg, #131210 0%, #100f0d 55%, #0b0a09 100%);
  --bg-section-glow:  radial-gradient(90% 70% at 50% 0%, rgba(200,170,127,0.10) 0%, rgba(200,170,127,0) 55%), linear-gradient(180deg, #0a0908 0%, #000 60%);
  --grad-panel: linear-gradient(180deg, rgba(248,248,248,0.045) 0%, rgba(248,248,248,0.012) 40%, rgba(248,248,248,0) 100%), var(--zea-ink);
  --grad-panel-hover: linear-gradient(180deg, rgba(200,170,127,0.08) 0%, rgba(248,248,248,0.02) 45%, rgba(248,248,248,0) 100%), var(--zea-ink);

  /* ---- Semantic: surfaces ---- */
  --bg-base:       var(--zea-black);
  --bg-surface:    var(--zea-ink);          /* cards on black */
  --bg-elevated:   var(--zea-anthracite-800);
  --bg-anthracite: var(--zea-anthracite);
  --bg-inverse:    var(--zea-off-white);    /* light sections */

  /* ---- Semantic: text ---- */
  --text-primary:   var(--zea-off-white);
  --text-secondary: var(--alpha-65);
  --text-muted:     var(--alpha-45);
  --text-faint:     var(--alpha-30);
  --text-gold:      var(--zea-gold);
  --text-on-gold:   var(--zea-black);
  --text-on-light:  #0A0A0A;
  --text-on-light-secondary: rgba(10, 10, 10, 0.62);

  /* ---- Semantic: accent ---- */
  --accent:        var(--zea-gold);
  --accent-hover:  var(--zea-gold-light);
  --accent-press:  var(--zea-gold-dark);
  --accent-soft:   var(--gold-14);

  /* ---- Semantic: borders ---- */
  --border-subtle:      var(--alpha-08);
  --border-default:     var(--alpha-12);
  --border-strong:      var(--alpha-16);
  --border-gold:        var(--gold-40);
  --border-gold-solid:  var(--zea-gold);

  /* ---- Status (used sparingly) ---- */
  --status-success: #6FAE7E;
  --status-error:   #C46B6B;
  --status-warning: var(--zea-gold-light);

  /* ---- Focus ring ---- */
  --focus-ring: rgba(200, 170, 127, 0.55);
}

/* ===== typography.css ===== */
/* ZEA Elite Performance — Typography tokens
   Display: Oswald — condensed, athletic, disciplined (uppercase headings).
   Body / UI: Archivo — modern grotesque, clean and premium.
   Eyebrows / labels use Archivo, uppercase, widely tracked. */

:root {
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Archivo", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Archivo", ui-monospace, monospace;

  /* ---- Weights ---- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* ---- Fluid display sizes (hero / section heads) ---- */
  --fs-display-1: clamp(3.25rem, 7.5vw, 6.5rem);
  --fs-display-2: clamp(2.5rem, 5vw, 4.25rem);
  --fs-display-3: clamp(2rem, 3.5vw, 3rem);

  /* ---- Headings ---- */
  --fs-h1: 2.5rem;
  --fs-h2: 2rem;
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;

  /* ---- Body ---- */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-base: 1rem;      /* 16 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-xs:   0.75rem;   /* 12 */

  /* ---- Label / eyebrow ---- */
  --fs-eyebrow: 0.8125rem; /* 13 */

  /* ---- Line heights ---- */
  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-heading: 1.2;
  --lh-body:    1.6;
  --lh-relaxed: 1.75;

  /* ---- Letter spacing ---- */
  --ls-display:  -0.01em;
  --ls-tight:    -0.005em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-eyebrow:  0.22em;
  --ls-button:   0.12em;
}

/* ---- Convenience composite classes ---- */
.zea-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-gold);
}

.zea-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.zea-title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  text-transform: uppercase;
}

.zea-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* ===== spacing.css ===== */
/* ZEA Elite Performance — Spacing & layout tokens
   Base unit: 4px. Generous, airy rhythm — premium brands breathe. */

:root {
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
  --space-40:  160px;

  /* Section vertical rhythm */
  --section-y:        clamp(72px, 9vw, 144px);
  --section-y-tight:  clamp(48px, 6vw, 88px);

  /* Page container */
  --container-max:    1240px;
  --container-narrow: 880px;
  --container-pad:    clamp(20px, 5vw, 64px);

  /* Element gaps */
  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 20px;
  --gap-lg: 32px;
  --gap-xl: 48px;
}

/* ===== effects.css ===== */
/* ZEA Elite Performance — Effects: radius, borders, shadows, motion
   Premium = restrained. Small radii (near-architectural), hairline borders,
   deep soft shadows on black, and one signature gold glow for emphasis. */

:root {
  /* ---- Radius ---- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   18px;
  --radius-pill: 999px;
  --radius-card: var(--radius-md);

  /* ---- Border widths ---- */
  --border-hair: 1px;
  --border-thin: 1.5px;

  /* ---- Shadows (on black) ---- */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:  0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-md:  0 14px 40px rgba(0, 0, 0, 0.55);
  --shadow-lg:  0 28px 70px rgba(0, 0, 0, 0.65);
  --shadow-card: 0 18px 48px rgba(0, 0, 0, 0.5);

  /* ---- Gold glows (signature, use sparingly) ---- */
  --glow-gold-sm: 0 0 0 1px var(--gold-24), 0 8px 24px rgba(200, 170, 127, 0.16);
  --glow-gold-md: 0 10px 40px rgba(200, 170, 127, 0.22);
  --glow-gold-cta: 0 12px 34px rgba(200, 170, 127, 0.28);

  /* ---- Inset / sheen ---- */
  --inset-top-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --inset-gold-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.25);

  /* ---- Gradients ---- */
  --grad-gold: linear-gradient(135deg, var(--zea-gold-light) 0%, var(--zea-gold) 48%, var(--zea-gold-dark) 100%);
  --grad-gold-line: linear-gradient(90deg, transparent, var(--zea-gold), transparent);
  --grad-fade-up: linear-gradient(to top, var(--zea-black) 0%, rgba(0,0,0,0.5) 45%, transparent 100%);
  --grad-fade-down: linear-gradient(to bottom, var(--zea-black) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
  --grad-surface: linear-gradient(180deg, var(--zea-anthracite-800) 0%, var(--zea-ink) 100%);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  140ms;
  --dur-base:  240ms;
  --dur-slow:  420ms;
  --dur-reveal: 720ms;

  /* ---- Layout chrome ---- */
  --header-h: 76px;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

/* ===== base.css ===== */
/* ZEA Elite Performance — Base resets & primitives
   Sets the black canvas, off-white text, and shared helpers. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--text-primary);
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--zea-gold); color: var(--zea-black); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- Layout helpers ---- */
.zea-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.zea-section { padding-block: var(--section-y); }

/* Thin gold rule used as a section / detail accent */
.zea-rule-gold {
  height: 1px;
  width: 64px;
  background: var(--grad-gold-line);
  background: linear-gradient(90deg, var(--zea-gold), transparent);
  border: 0;
}

/* Premium scrollbar on dark */
* {
  scrollbar-color: var(--zea-anthracite-600) transparent;
  scrollbar-width: thin;
}