/* ============================================================
   TERRA ARCANA — DESIGN SYSTEM TOKENS
   Color + Typography for both Terra Arcana (public) and
   Solomon's Vault (private members' lodge area).
   ============================================================ */

/* Webfonts via Google Fonts. Fonts/ dir is empty; flagged in README. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..700,30..100,0..1;1,9..144,300..700,30..100,0..1&family=Inter+Tight:ital,wght@0,300..700;1,300..600&family=Cormorant+Garamond:wght@300;400;500;600&family=Jost:wght@300;400;500&display=swap");

:root {
  /* ---------- TERRA ARCANA (public brand) ---------- */
  /* Antique gold scale */
  --gold:        #c9a255;   /* primary */
  --gold-soft:   #e0be7e;   /* highlight, italic accents */
  --gold-deep:   #8a6c33;   /* eyebrow, restrained */
  --gold-ink:    #5b4721;   /* text on paper */

  /* Warm-black / charcoal scale */
  --ink:         #0a0806;   /* page */
  --ink-1:       #111010;   /* surface 1 */
  --ink-2:       #171513;   /* surface 2 */
  --ink-3:       #1f1c17;   /* surface 3 */

  /* Warm ivory / paper */
  --ivory:       #efe5d4;   /* primary text on dark */
  --ivory-dim:   #b7ad9c;   /* body text */
  --ivory-mute:  #726a5d;   /* meta, tertiary */

  --paper:       #f4ecd8;   /* founder letter cream */
  --paper-dim:   #e4dcc6;
  --paper-ink:   #1a1612;
  --paper-quote: #3a2f20;

  /* Hairlines (always thin, gold-tinted) */
  --hairline:        rgba(201, 162, 85, 0.22);
  --hairline-soft:   rgba(239, 229, 212, 0.08);
  --hairline-paper:  rgba(26, 22, 18, 0.14);

  /* Semantic — public brand */
  --bg:              var(--ink);
  --bg-elev:         var(--ink-1);
  --fg:              var(--ivory);
  --fg-dim:          var(--ivory-dim);
  --fg-mute:         var(--ivory-mute);
  --accent:          var(--gold);
  --accent-soft:     var(--gold-soft);
  --accent-deep:     var(--gold-deep);
  --rule:            var(--hairline);

  /* ---------- SOLOMON'S VAULT (private lodge) ---------- */
  --vault-gold:        #c7a24a;
  --vault-gold-light:  #e1c27f;
  --vault-gold-dim:    #8a6c33;
  --vault-ink:         #040404;
  --vault-black:       #090909;
  --vault-charcoal:    #121110;
  --vault-panel:       #161513;
  --vault-panel-deep:  #11100f;
  --vault-walnut:      #2b1f12;   /* dark walnut accent */
  --vault-parchment:   #efe5d4;   /* aged parchment */
  --vault-candle:      #ecc88a;   /* candlelight warm glow */
  --vault-line:        rgba(199, 162, 74, 0.18);
  --vault-line-soft:   rgba(199, 162, 74, 0.08);
  --vault-ivory:       #efe5d4;
  --vault-ivory-dim:   #c8bead;
  --vault-muted:       #8d8578;
  --vault-danger:      #d9a4a4;
  --vault-success:     #d8c07d;

  /* ---------- Typography ---------- */
  /* Public brand */
  --serif:  'Fraunces', 'Iowan Old Style', 'Palatino', Georgia, serif;
  --sans:   'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Vault — more classical / lodge-room */
  --vault-serif: 'Cormorant Garamond', Georgia, serif;
  --vault-sans:  'Jost', system-ui, sans-serif;

  /* Fraunces optical axes */
  --fraunces-display: "opsz" 144, "SOFT" 30, "WONK" 1;
  --fraunces-italic:  "opsz" 144, "SOFT" 80, "WONK" 1;
  --fraunces-text:    "opsz" 14,  "SOFT" 50, "WONK" 0;

  /* ---------- Spacing & rhythm ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  14px;
  --space-4:  22px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  72px;
  --space-8:  110px;

  --shell-max:  1240px;
  --shell-pad:  clamp(20px, 4vw, 56px);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --t-fast:  .25s;
  --t-base:  .35s;
  --t-slow:  .9s;

  /* ---------- Shadows / depth ---------- */
  --shadow-soft:  0 18px 36px rgba(0, 0, 0, 0.28);
  --shadow:       0 28px 70px rgba(0, 0, 0, 0.45);
  --shadow-coin:  0 30px 60px rgba(0, 0, 0, 0.6);
  --drop-coin:    drop-shadow(0 25px 40px rgba(0, 0, 0, 0.55));
  --drop-card:    drop-shadow(0 15px 30px rgba(0, 0, 0, 0.5));
}

/* ============================================================
   SEMANTIC TYPE — drop-in classes / element defaults
   ============================================================ */

.h-display,
h1.display {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(48px, 6.4vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.018em;
  font-variation-settings: var(--fraunces-display);
  color: var(--fg);
}

h1, .h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 5.4vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  font-variation-settings: var(--fraunces-display);
  color: var(--fg);
}

h2, .h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 96, "SOFT" 30, "WONK" 1;
  color: var(--fg);
}

h3, .h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  font-variation-settings: "opsz" 48, "SOFT" 30, "WONK" 1;
  color: var(--fg);
}

h4, .h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  font-variation-settings: "opsz" 24, "SOFT" 30, "WONK" 1;
  color: var(--fg);
}

em, .italic-accent {
  font-style: italic;
  font-variation-settings: var(--fraunces-italic);
  color: var(--accent-soft);
}

p, .body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-dim);
  font-feature-settings: "ss01", "cv11";
}

.lede {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
  color: var(--fg-dim);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.small-note {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--fg-mute);
}

.numeral {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 20, "WONK" 1;
  font-feature-settings: "lnum", "tnum";
  color: var(--accent);
}

.script-italic {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 1;
  color: var(--accent-soft);
}

/* ----- Vault-specific type primitives ----- */
.vault-display {
  font-family: var(--vault-serif);
  font-weight: 300;
  font-size: clamp(34px, 4vw, 64px);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vault-gold-light);
}

.vault-title {
  font-family: var(--vault-serif);
  font-size: 30px;
  font-weight: 300;
  line-height: 1.05;
  color: var(--vault-ivory);
}

.vault-plaque {
  font-family: var(--vault-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--vault-gold-dim);
}

.vault-body {
  font-family: var(--vault-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--vault-ivory-dim);
}

.vault-script {
  font-family: var(--vault-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--vault-gold-light);
}