/* =========================================================================
   Bullion Club — Colors & Type
   Source: Figma "Bullion Club WEB [CLIENT].fig" — pages Colors & Typography
   ========================================================================= */

/* ---------- Fonts --------------------------------------------------------
   Original Figma uses licensed trial families. We substitute:
     Ogg Text TRIAL / Ogg TRIAL  → "Cormorant Garamond" (Google, closest serif
       with similar ductus, high-contrast strokes and same italic feel)
     Navigo                      → "Jost" (geometric humanist sans, similar
       proportions; Navigo is licensed from Lost Type)
     Acid Grotesk                → "Archivo" (upright neo-grotesk used for
       uppercase navigation — same 16/1.6 rhythm)
     Helvetica Neue              → system stack
   Please supply real files in /fonts/ when you have them — we already
   reference /fonts/ogg/*, /fonts/navigo/* so drop-ins will pick up.
------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=Archivo:wght@400;500;600&display=swap');

/* ---- Real brand fonts (uploaded by client) --------------------------- */
@font-face {
  font-family: "Ogg";
  font-weight: 500;
  font-style: normal;
  src: url("fonts/Ogg_Medium.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Ogg Text";
  font-weight: 400;
  font-style: normal;
  src: url("fonts/OggText-Book.otf") format("opentype"),
       url("fonts/OggText-Book.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Ogg Text";
  font-weight: 400;
  font-style: italic;
  src: url("fonts/OggText-BookItalic.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Ogg Text";
  font-weight: 500;
  font-style: italic;
  src: url("fonts/OggText-MediumItalic.otf") format("opentype");
  font-display: swap;
}

:root {
  /* Serif display + editorial body (Ogg) */
  --font-display: "Ogg", "Ogg TRIAL", "Didot", "Cormorant Garamond", serif;
  --font-serif:   "Ogg Text", "Ogg Text TRIAL", Georgia, "Cormorant Garamond", serif;
  /* Humanist sans — micro labels, eyebrows, style tables */
  --font-sans:    "Jost", "Navigo", "Helvetica Neue", system-ui, sans-serif;
  /* Uppercase utility sans — navigation, metadata, tags */
  --font-nav:     "Archivo", "Acid Grotesk", "Jost", sans-serif;

  /* ---- RAW PALETTE ---- */
  --beige:         #E0D5C4;  /* page canvas, primary light */
  --beige-80:      rgba(224,213,196,0.8);
  --beige-50:      rgba(224,213,196,0.5);
  --beige-30:      rgba(224,213,196,0.3);
  --beige-light:   #E9E2D6;  /* very light cream */
  --beige-warm:    #E6DAC1;  /* between beige and gold */

  --brown:         #1D1C1A;  /* near-black bedrock */
  --brown-80:      rgba(29,28,26,0.8);
  --brown-50:      rgba(29,28,26,0.5);
  --brown-30:      rgba(29,28,26,0.3);
  --brown-ink:     #24221F;  /* subtle copy on beige */

  --green:         #202D28;  /* forest / vault green */

  --gold:          #BFA46F;  /* primary brand gold */
  --gold-50:       #D5C298;  /* gold tint */
  --gold-dark:     #85724D;  /* deep antique gold */
  --gold-warm:     #8C734A;  /* bronze accent */

  --red:           #E82834;  /* error / sell indicator */
  --white:         #FFFFFF;
  --white-warm:    #FFFCF9;  /* warm paper */

  /* ---- SEMANTIC ---- */
  --bg-page:       var(--beige);
  --bg-dark:       var(--brown);
  --bg-green:      var(--green);
  --bg-card:       var(--beige-light);

  --fg:            var(--brown);
  --fg-muted:      var(--brown-80);
  --fg-soft:       var(--brown-50);
  --fg-on-dark:    var(--beige);
  --fg-on-dark-muted: var(--beige-80);
  --fg-on-dark-soft:  var(--beige-50);

  --accent:        var(--gold);
  --accent-strong: var(--gold-dark);
  --danger:        var(--red);

  --border-dark:   rgba(29,28,26,0.2);
  --border-light:  rgba(224,213,196,0.2);
  --border-gold:   rgba(191,164,111,0.5);

  /* ---- SPACING (multiples of 4) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --s-30: 120px; --s-40: 160px;

  /* ---- RADII ---- (Bullion Club is sharp & editorial — almost no rounding) */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;   /* buttons rounded very slightly */
  --r-md:   8px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ---- ELEVATION ---- (subtle; brand avoids heavy shadows) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.13);
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.20);
  --shadow-inset-gold: inset 0 0 0 1px var(--gold);

  /* ---- TYPE SCALE (desktop) ----
     Display  Ogg Medium 90/100, 80/100, 64/100
     H1/Hero  90px  (100% lh)
     H2       80px  (110%)
     H3       64px  (110%)
     H4       44px  (115%)
     H5       28px  (120%)
     Body L   18px  (140%)   Ogg Text Light
     Body     16px  (160%)   Ogg Text Book
     Body S   14px  (140%)
     Caption  12px  (130%)
     BTN      18px Ogg Text Medium Italic
     Nav      16px Acid Grotesk Medium UPPERCASE
  */
  --fs-hero:  90px;
  --fs-h2:    80px;
  --fs-h3:    64px;
  --fs-h4:    44px;
  --fs-h5:    28px;
  --fs-body-l:18px;
  --fs-body:  16px;
  --fs-small: 14px;
  --fs-caption: 12px;
}

/* ---------- Base element styles ---------------------------------------- */
html, body { background: var(--bg-page); color: var(--fg); }
body { font-family: var(--font-serif); font-size: var(--fs-body); line-height: 1.6; }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-hero);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.1;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.1;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.15;
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h5);
  line-height: 1.2;
  margin: 0;
}

p, .body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
}
.body-l { font-size: var(--fs-body-l); line-height: 1.4; font-weight: 300; }
.body-small { font-size: var(--fs-small); line-height: 1.4; }
.caption { font-size: var(--fs-caption); line-height: 1.3; }

.italic-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}

/* Eyebrow + nav utility — used for section numbers, navigation, tags */
.eyebrow, .nav-label {
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sans-meta {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.4;
}

/* Bullion numeric — used for big "01, 02, 03" step markers */
.numeric-step {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1;
  color: var(--gold);
  font-feature-settings: "lnum";
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold); }

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