/* ============================================================
   VAULT — Colors & Type
   Dark-first. Quiet authority. Material.
   ============================================================ */

/* Fonts
   Display = Georgia (serif, system) — no import needed
   Body/UI = Helvetica Neue (self-hosted from fonts/)
   ----------------------------------------------------------- */
@font-face { font-family: "Helvetica Neue"; font-weight: 100; font-style: normal; src: url("fonts/HelveticaNeueUltraLight.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Helvetica Neue"; font-weight: 100; font-style: italic; src: url("fonts/HelveticaNeueUltraLightItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Helvetica Neue"; font-weight: 200; font-style: normal; src: url("fonts/HelveticaNeueThin.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Helvetica Neue"; font-weight: 200; font-style: italic; src: url("fonts/HelveticaNeueThinItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Helvetica Neue"; font-weight: 300; font-style: normal; src: url("fonts/HelveticaNeueLight.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Helvetica Neue"; font-weight: 300; font-style: italic; src: url("fonts/HelveticaNeueLightItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Helvetica Neue"; font-weight: 400; font-style: normal; src: url("fonts/HelveticaNeueRoman.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Helvetica Neue"; font-weight: 400; font-style: italic; src: url("fonts/HelveticaNeueItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Helvetica Neue"; font-weight: 500; font-style: normal; src: url("fonts/HelveticaNeueMedium.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Helvetica Neue"; font-weight: 500; font-style: italic; src: url("fonts/HelveticaNeueMediumItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Helvetica Neue"; font-weight: 700; font-style: normal; src: url("fonts/HelveticaNeueBold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Helvetica Neue"; font-weight: 700; font-style: italic; src: url("fonts/HelveticaNeueBoldItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Helvetica Neue"; font-weight: 800; font-style: normal; src: url("fonts/HelveticaNeueHeavy.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Helvetica Neue"; font-weight: 800; font-style: italic; src: url("fonts/HelveticaNeueHeavyItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Helvetica Neue"; font-weight: 900; font-style: normal; src: url("fonts/HelveticaNeueBlack.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Helvetica Neue"; font-weight: 900; font-style: italic; src: url("fonts/HelveticaNeueBlackItalic.otf") format("opentype"); font-display: swap; }

:root {
  /* ---- Core palette ---- */
  --vault-obsidian:    #0A0A0A;   /* primary bg */
  --vault-card:        #1A1A1A;   /* card surfaces, panels */
  --vault-card-2:      #0F0E0D;   /* section alt bg (warm obsidian) */
  --vault-brass:       #C9A96E;   /* primary accent, CTA */
  --vault-brass-light: #E8D5A8;   /* gradient peak, highlight */
  --vault-brass-dark:  #A88B4A;   /* gradient shadow, pressed */
  --vault-steel:       #8B9DAF;   /* muted text, labels, specs */
  --vault-cream:       #F5F3EF;   /* primary text on dark */
  --vault-muted:       #9A958D;   /* body/secondary copy */

  /* ---- Semantic foreground ---- */
  --fg-1: var(--vault-cream);         /* primary text */
  --fg-2: var(--vault-muted);         /* body/secondary */
  --fg-3: var(--vault-steel);         /* labels, specs, meta */
  --fg-accent: var(--vault-brass);    /* highlights, CTAs */

  /* ---- Semantic background ---- */
  --bg-1: var(--vault-obsidian);
  --bg-2: var(--vault-card-2);
  --bg-3: var(--vault-card);

  /* ---- Borders (always low-alpha brass) ---- */
  --border-1: rgba(201, 169, 110, 0.06);
  --border-2: rgba(201, 169, 110, 0.12);
  --border-3: rgba(201, 169, 110, 0.20);
  --border-brass: rgba(201, 169, 110, 0.30);

  /* ---- Accent fills (brass at low alpha) ---- */
  --brass-wash-1: rgba(201, 169, 110, 0.03);
  --brass-wash-2: rgba(201, 169, 110, 0.05);

  /* ---- Fonts ---- */
  --font-display: Georgia, "Times New Roman", serif;
  --font-body:    "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* ---- Type scale (Vault is restrained; few sizes) ---- */
  --fs-label: 11px;          /* eyebrow / section-label, UPPERCASE */
  --fs-body-sm: 13px;        /* spec tables, nav items */
  --fs-body: 15px;           /* body copy */
  --fs-body-lg: 17px;        /* lead paragraph */
  --fs-h3: 18px;             /* step/feature title */
  --fs-h2: 40px;             /* section display */
  --fs-h1: 72px;             /* hero display */

  /* ---- Letter spacing ---- */
  --ls-label: 0.42em;        /* +5px at 11px -> wide tracking */
  --ls-logo:  0.5em;         /* +6px at 12-18px wordmark */
  --ls-wide:  0.2em;
  --ls-nav:   0.17em;        /* nav + CTA */
  --ls-display: -0.015em;    /* tighten serif */

  /* ---- Line heights ---- */
  --lh-display: 1.1;
  --lh-heading: 1.3;
  --lh-body:    1.7;
  --lh-prose:   1.8;

  /* ---- Spacing (4px grid, but mostly 8-48 range) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 100px;              /* section vertical padding */

  /* ---- Radii (Vault uses 0 or very tight) ---- */
  --r-0: 0px;                /* default — hard edges */
  --r-1: 2px;
  --r-2: 4px;
  --r-card: 14px;            /* ONLY the physical card visual */

  /* ---- Shadows ---- */
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.5);        /* the metal card */
  --shadow-panel: 0 1px 0 rgba(201, 169, 110, 0.04);

  /* ---- Gradients ---- */
  --grad-brass: linear-gradient(135deg, #C9A96E 0%, #E8D5A8 50%, #A88B4A 100%);
  --grad-hero-glow: radial-gradient(ellipse at 50% 30%, #1a1816 0%, #0A0A0A 70%);
  --grad-section-fade: linear-gradient(180deg, #0A0A0A 0%, #0F0E0D 100%);

  /* ---- Motion ---- */
  --ease-brand: cubic-bezier(0.16, 1, 0.3, 1);  /* slow-out, premium */
  --dur-short: 200ms;
  --dur-base: 400ms;
  --dur-long: 800ms;
  --dur-reveal: 1200ms;
}

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

body {
  margin: 0;
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(201, 169, 110, 0.3); color: var(--vault-cream); }

/* ============================================================
   Semantic type
   ============================================================ */

/* Eyebrow / section label — the single most recognizable
   Vault typographic gesture. Small, wide, uppercase, brass. */
.vault-label, [data-vault="label"] {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  color: var(--fg-accent);
  text-transform: uppercase;
  margin: 0;
}

h1, .vault-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 7vw, var(--fs-h1));
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  margin: 0;
}

h2, .vault-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 5vw, var(--fs-h2));
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  margin: 0;
}

h3, .vault-h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-h3);
  letter-spacing: 0.03em;
  color: var(--fg-1);
  margin: 0;
}

p, .vault-p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  max-width: 600px;
  margin: 0;
}

small, .vault-meta {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--fg-3);
  letter-spacing: 0.03em;
}

/* Brass figure — stats / prices */
.vault-figure {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--fg-accent);
  font-size: 28px;
  letter-spacing: var(--ls-display);
}

/* Wordmark */
.vault-wordmark {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: var(--ls-logo);
  color: var(--fg-accent);
}

/* Buttons / CTA — hard edges, uppercase, tight tracking */
.vault-cta {
  display: inline-block;
  padding: 14px 24px;
  background: var(--vault-brass);
  color: var(--vault-obsidian);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: var(--r-0);
  cursor: pointer;
  transition: opacity var(--dur-short) ease;
}
.vault-cta:hover { opacity: 0.85; }
.vault-cta:active { background: var(--vault-brass-dark); }

.vault-cta--ghost {
  background: transparent;
  color: var(--fg-accent);
  border: 1px solid var(--border-3);
}
.vault-cta--ghost:hover { background: var(--brass-wash-2); opacity: 1; }

/* Panels / spec tables */
.vault-panel {
  border: 1px solid var(--border-2);
  background: transparent;
  border-radius: var(--r-0);
}
.vault-panel--wash { background: var(--brass-wash-1); border-color: var(--border-2); }

/* Links */
a { color: var(--fg-accent); text-decoration: none; }
a:hover { color: var(--vault-brass-light); }