/* =====================================================================
   Valco Design System — Foundations
   Monochrome, Scandinavian-clean, premium typography in Maven Pro.
   Use these custom properties everywhere; never hardcode values.
   ===================================================================== */

/* ---------- Fonts -------------------------------------------------- */
@font-face {
  font-family: "Maven Pro";
  src: url("./fonts/MavenPro-VariableFont_wght.ttf") format("truetype-variations"),
       url("./fonts/MavenPro-VariableFont_wght.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ------------------------------------------------- */
:root {
  /* Brand */
  --valco-black:        #000000;
  --valco-ink:          #171717;   /* primary text / UI black */
  --valco-white:        #ffffff;
  --valco-paper:        #fafafa;   /* off-white surface */

  /* Neutral scale (warmish-neutral, derived from #171717 → #fafafa) */
  --neutral-1000:       #000000;
  --neutral-950:        #0a0a0a;
  --neutral-900:        #171717;
  --neutral-800:        #262626;
  --neutral-700:        #3d3d3d;
  --neutral-600:        #595959;
  --neutral-500:        #737373;
  --neutral-400:        #a3a3a3;
  --neutral-300:        #d4d4d4;
  --neutral-200:        #e5e5e5;
  --neutral-150:        #ededed;
  --neutral-100:        #f4f4f4;
  --neutral-50:         #fafafa;
  --neutral-0:          #ffffff;

  /* Semantic foreground / background */
  --fg-1:               var(--valco-ink);     /* primary text */
  --fg-2:               var(--neutral-700);   /* body / secondary */
  --fg-3:               var(--neutral-500);   /* muted / meta */
  --fg-4:               var(--neutral-400);   /* placeholder / disabled */
  --fg-on-dark:         var(--valco-white);

  --bg-page:            var(--valco-white);
  --bg-elevated:        var(--valco-white);
  --bg-subtle:          var(--valco-paper);
  --bg-muted:           var(--neutral-100);
  --bg-inverse:         var(--valco-ink);

  --border-subtle:      var(--neutral-200);
  --border-default:     var(--neutral-300);
  --border-strong:      var(--neutral-900);

  /* Brand accent palette (from Valco AI Visual Guidelines).
     Use AT MOST 1–2 per design, sparingly, for highlights only. */
  --depression-blue:    #15233E;   /* moody, serious accent */
  --period-red:         #831B2C;   /* bold, attention-grabbing */
  --pinkish:            #C4A0BA;   /* soft, unexpected warmth */
  --wunder-green:       #1F312F;   /* earthy, grounded */
  --president-orange:   #D96512;   /* energy, CTA */
  --imperial-purple:    #433796;   /* Death Star vibes, premium */
  --gold:               #F0BE48;   /* achievement, premium highlights */

  /* Functional state accents (semantic — not the brand accents above) */
  --accent-success:     var(--wunder-green);   /* "in stock", positive */
  --accent-warning:     var(--president-orange); /* customs notice */
  --accent-error:       var(--period-red);     /* sold out, error */
  --accent-star:        var(--gold);           /* review star fill only */

  /* Typography ----------------------------------------------------- */
  --font-sans:          "Maven Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:          "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale — Major Third (1.25) progression, generous & sturdy.
     12 → 14 → 16 → 20 → 24 → 32 → 40 → 56 → 80 → 112 */
  --fs-display-xl:      clamp(56px, 7vw, 112px);  /* 112 */
  --fs-display-lg:      clamp(44px, 5.5vw, 80px); /* 80  */
  --fs-h1:              clamp(36px, 4vw, 56px);   /* 56  */
  --fs-h2:              clamp(28px, 3vw, 40px);   /* 40  */
  --fs-h3:              24px;                     /* was 22 */
  --fs-h4:              20px;                     /* was 18 */
  --fs-body-lg:         20px;                     /* was 18 */
  --fs-body:            16px;
  --fs-body-sm:         14px;
  --fs-caption:         12px;
  --fs-eyebrow:         12px;   /* uppercase, tracked */

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

  /* Line heights */
  --lh-tight:           1.0;
  --lh-snug:            1.15;
  --lh-normal:          1.4;
  --lh-relaxed:         1.6;

  /* Tracking */
  --ls-tight:           -0.02em;
  --ls-snug:            -0.01em;
  --ls-normal:          0em;
  --ls-wide:            0.04em;
  --ls-wider:           0.12em;   /* eyebrow / all-caps labels */

  /* Spacing scale (4px base) */
  --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;

  /* Radii — minimal, never frilly. The wordmark is rounded; UI uses
     a soft 6px radius on cards, buttons, inputs, and media tiles.
     No pill radius — Valco UI never uses fully-rounded shapes. */
  --radius-none:        0;
  --radius-sm:          2px;
  --radius-md:          6px;   /* default UI radius — brand standard */
  --radius-lg:          8px;

  /* Borders */
  --border-w-hair:      1px;
  --border-w-thick:     2px;

  /* Elevation — restrained. Premium ≠ floaty. */
  --shadow-1:           0 1px 2px rgba(0,0,0,0.04);
  --shadow-2:           0 2px 8px rgba(0,0,0,0.06);
  --shadow-3:           0 8px 24px rgba(0,0,0,0.08);
  --shadow-product:     0 24px 60px -12px rgba(0,0,0,0.18);

  /* Motion — quick, calm, almost mechanical. No bouncing. */
  --ease-standard:      cubic-bezier(0.2, 0, 0, 1);
  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:            cubic-bezier(0.4, 0, 1, 1);
  --dur-1:              120ms;
  --dur-2:              200ms;
  --dur-3:              320ms;
  --dur-4:              480ms;

  /* Layout */
  --container-narrow:   720px;
  --container-default:  1200px;
  --container-wide:     1440px;
}

/* ---------- Base elements ----------------------------------------- */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — Maven Pro Black for hero, Bold for sections.
   Tight tracking, very tight leading on display sizes. */
.display-xl, h1.display, .h-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.display-lg {
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
h2, .h2 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
}
h3, .h3 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}
h4, .h4 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}
.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
}
.body-sm {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-1);
}

.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Selection — match the brand: black on white only. */
::selection {
  background: var(--valco-ink);
  color: var(--valco-white);
}

/* Focus ring — visible but quiet, fits the monochrome system */
:focus-visible {
  outline: 2px solid var(--valco-ink);
  outline-offset: 2px;
}