/* =========================================================
   A CÂMARA — colors & type
   The Chamber. Hidden. Ritual. Sigilic. Resonant. Initiatic.
   ========================================================= */

/* ---------- web fonts (Google Fonts substitutions; flagged) ---------- */
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap");

:root {
  /* =========================================================
     COLOR — Chamber palette
     A dark, cinematic system. Ink is the room; vellum is the
     parchment the secret is written on; ember is the slit of
     light under the door; patina is the oxidized brass; sigil
     is the wax seal. No vibrant saturation — everything is
     filtered through 90 years of dust.
     ========================================================= */

  /* Ink — backgrounds, chamber walls */
  --ink-0:    #07090a;        /* void, behind everything */
  --ink-1:    #0d1012;        /* primary surface */
  --ink-2:    #14181b;        /* card / panel */
  --ink-3:    #1d2327;        /* raised surface */
  --ink-4:    #2a3137;        /* hairline / divider on dark */
  --ink-5:    #3a434a;        /* muted stroke */

  /* Vellum — the paper, the text, the parchment */
  --vellum:   #ece4d2;        /* primary text on dark — warm off-white */
  --bone:     #cfc6b3;        /* secondary text */
  --ash:      #8a8578;        /* tertiary / metadata */
  --dust:     #5a574e;        /* disabled / quiet caption */

  /* Ember & Lumen — the light beam, the portal */
  --ember:    #d97a3a;        /* primary warm accent — sodium-lamp orange */
  --ember-hi: #e89358;
  --ember-lo: #a45422;
  --lumen:    #f3c75e;        /* gold of revealed knowledge */
  --lumen-hi: #f7d785;
  --lumen-lo: #b8902f;

  /* Patina — institutional, oxidized brass / verdigris */
  --patina:    #4a6b6e;
  --patina-hi: #6b8a8c;
  --patina-lo: #2f4648;

  /* Abyss — deep cold of the silent room */
  --abyss:    #173544;
  --abyss-hi: #28556a;
  --abyss-lo: #0d2230;

  /* Sigil — the wax seal, oxblood. Warning, critical, sacred mark */
  --sigil:    #8b2a1f;
  --sigil-hi: #a8392a;
  --sigil-lo: #5a1a13;

  /* ---- Semantic ---- */
  --bg:        var(--ink-1);
  --bg-elev:   var(--ink-2);
  --bg-raised: var(--ink-3);
  --fg:        var(--vellum);
  --fg-muted:  var(--bone);
  --fg-quiet:  var(--ash);
  --fg-faint:  var(--dust);
  --line:      var(--ink-4);
  --line-hi:   var(--ink-5);
  --accent:    var(--ember);
  --accent-cool: var(--patina);
  --danger:    var(--sigil);
  --gold:      var(--lumen);

  /* =========================================================
     TYPE
     Three voices:
       — Garamond serif (italic-leaning) for revelation,
         declarative statements, the brand voice.
       — DM Sans for body, UI, evidence, paragraphs.
       — JetBrains Mono ALL-CAPS-TRACKED for captions,
         file labels, dossier meta — the "Discovery Channel"
         documentary chrome.
     ========================================================= */

  --font-display: "EB Garamond", "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-sans:    "DM Sans", "Söhne", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* sizes */
  --t-eyebrow:  10.5px;       /* mono, tracked, uppercase */
  --t-caption:  12px;
  --t-meta:     13px;
  --t-body:     16px;
  --t-body-lg:  18px;
  --t-h6:       18px;
  --t-h5:       22px;
  --t-h4:       28px;
  --t-h3:       36px;
  --t-h2:       52px;
  --t-h1:       72px;
  --t-display:  104px;

  /* leading */
  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  /* tracking */
  --tr-mono:    0.18em;       /* the documentary kicker */
  --tr-mono-tight: 0.08em;
  --tr-display: -0.015em;
  --tr-body:    0;

  /* radii — sparing. The Chamber has straight edges. */
  --r-0:  0px;
  --r-1:  2px;
  --r-2:  4px;
  --r-3:  8px;
  --r-pill: 999px;

  /* spacing scale (4px) */
  --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:  96px;
  --s-10: 128px;

  /* shadows — almost none. The chamber doesn't float. */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.6);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.55);
  --shadow-portal: 0 0 80px -10px rgba(217,122,58,0.45),
                   0 0 200px -20px rgba(243,199,94,0.18);

  /* rules */
  --rule-w: 1px;
  --rule:   1px solid var(--line);
  --rule-hi: 1px solid var(--line-hi);
  --rule-vellum: 1px solid color-mix(in oklab, var(--vellum) 25%, transparent);
}

/* ============================
   SEMANTIC TYPE CLASSES
   ============================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.cam-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--vellum);
}
.cam-display em, .cam-display i { font-style: italic; font-weight: 500; color: var(--vellum); }

.cam-h1, h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--vellum);
  margin: 0;
}
.cam-h2, h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--vellum);
  margin: 0;
}
.cam-h3, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--vellum);
  margin: 0;
}
.cam-h4, h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h4);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--vellum);
  margin: 0;
}
.cam-h5, h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h5);
  line-height: 1.3;
  color: var(--vellum);
  margin: 0;
}
.cam-h6, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h6);
  line-height: 1.4;
  color: var(--vellum);
  margin: 0;
}

.cam-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.45;
  color: var(--bone);
}

.cam-body, p {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  margin: 0;
}

.cam-meta {
  font-family: var(--font-sans);
  font-size: var(--t-meta);
  color: var(--fg-quiet);
  line-height: 1.5;
}

/* the documentary kicker — used everywhere small */
.cam-eyebrow, .cam-kicker {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--ash);
}

.cam-caption {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: var(--tr-mono-tight);
  color: var(--bone);
}

.cam-mono { font-family: var(--font-mono); }
.cam-italic { font-style: italic; }

/* a hairline divider, like a chamber's joinery */
.cam-rule {
  height: 1px;
  background: var(--line);
  border: 0;
}
.cam-rule--vellum {
  background: color-mix(in oklab, var(--vellum) 22%, transparent);
}

/* selection */
::selection {
  background: var(--ember);
  color: var(--ink-0);
}