/* ============================================================
   APOTHEOSIS — Design Tokens
   Concept Doc §7: candlelit classical academic, Bouguereau/Gérôme
   ============================================================ */

:root {
  /* Backgrounds — oxblood, candlelit marble shadows */
  --bg-deepest:   #0c0200;
  --bg-base:      #160400;
  --bg-raised:    #1a0500;
  --bg-card:      #1f0702;
  --bg-elevated:  #260a03;

  /* Gold / Amber — leaf, flame, inscription */
  --gold-pale:    #ffd970;   /* highlight stop in gradients */
  --gold-bright:  #f5b020;
  --gold:         #d4880a;
  --gold-deep:    #c9780a;
  --gold-ember:   #8a4a05;
  --gold-ash:     #3a2008;

  /* Crimson — velvet, blood, ritual */
  --crimson:       #c93000;
  --crimson-deep:  #b02000;
  --crimson-ember: #5a1400;

  /* Text — parchment, aged vellum */
  --text-bright:  #f3dfb8;
  --text:         #e0c8a0;
  --text-muted:   #c8a060;
  --text-dim:     #a08868;
  --text-faint:   #7a6248;

  /* Hairlines */
  --line:          rgba(212, 136, 10, 0.20);
  --line-strong:   rgba(212, 136, 10, 0.42);
  --line-crimson:  rgba(176, 32, 0, 0.40);

  /* Status */
  --online:  #4a8f3a;
  --online-bright: #7ecf5c;
  --offline: var(--crimson);

  /* Type */
  --font-display: 'Pathway Gothic One', 'Oswald', 'Impact', sans-serif;
  --font-ui:      'Cinzel', 'Trajan Pro', 'Cormorant Garamond', serif;
  --font-body:    'Raleway', 'Helvetica Neue', sans-serif;

  /* Font-size scale — ×1.2 ramp, mobile-first
     2xs  xs    sm    body  md    lg    xl    2xl   3xl   4xl
     11 → 13.2→ 15.8→ 19.2→ 18.7→ 22.6→ 26.4→ 33.6→ 38.4→ 46.1 */
  --fs-2xs:  11px;     /* micro: tiny labels, compass  */
  --fs-xs:   13.2px;   /* captions, meta, badges       */
  --fs-sm:   15.8px;   /* nav links, UI labels         */
  --fs-body: 19.2px;   /* long-form prose text         */
  --fs-md:   18.7px;   /* body reading, footer links   */
  --fs-lg:   22.6px;   /* card stats, medium display   */
  --fs-xl:   26.4px;   /* page headings                */
  --fs-2xl:  33.6px;   /* large display                */
  --fs-3xl:  38.4px;   /* very large display           */
  --fs-4xl:  46.1px;   /* wordmark (non-hero)          */
  --fs-hero: 62.4px;   /* hero wordmark clamp-base     */

  /* Spacing */
  --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;

  /* Chrome */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 6px;

  --shadow-deep: 0 20px 60px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 32px rgba(245, 176, 32, 0.18);

  --max-w: 1280px;
  --nav-h: 76px;
}

@media (min-width: 768px) {
  :root { --fs-hero: 168px; --fs-4xl: 105.6px; }
}
@media (min-width: 1024px) {
  :root { --fs-hero: 216px; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; }

html {
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

html, body {
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background:
    radial-gradient(ellipse 1200px 600px at 50% -10%, rgba(245,176,32,0.12), transparent 60%),
    radial-gradient(ellipse 800px 500px at 80% 30%, rgba(201,48,0,0.08), transparent 70%),
    linear-gradient(180deg, var(--bg-base) 0%, var(--bg-deepest) 100%);
  min-height: 100vh;
  position: relative;
  overscroll-behavior-x: none;
}

/* Film grain overlay — subtle aged paper texture */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.45  0 0 0 0 0.2  0 0 0 0.11 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: 0.35;
  mix-blend-mode: overlay;
  z-index: 1;
}

/* Vignette */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.65) 100%);
  z-index: 2;
}

main, nav, header, footer { position: relative; z-index: 3; }

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

::selection { background: var(--gold-deep); color: var(--bg-deepest); }

/* Page head title — serif override (Cinzel) over the body sans-serif */
.page-head h1 {
  font-family: var(--font-ui);
  font-size: var(--fs-xl); letter-spacing: 0.36em;
  color: var(--gold-bright); text-transform: uppercase; font-weight: 500;
  display: flex; align-items: center; gap: 14px; margin: 0;
}

/* Type utilities */
.t-display  { font-family: var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; }
.t-wordmark { font-family: var(--font-display); letter-spacing: 0.28em; text-transform: uppercase; font-weight: 400; }
.t-ui       { font-family: var(--font-ui); letter-spacing: 0.20em; text-transform: uppercase; font-weight: 500; }
.t-ui-sm    { font-family: var(--font-ui); letter-spacing: 0.24em; text-transform: uppercase; font-size: var(--fs-xs); font-weight: 500; }
.t-body     { font-family: var(--font-body); font-weight: 400; }

/* Ornamental divider */
.ornament {
  display: flex; align-items: center; gap: var(--s-4);
  color: var(--gold); font-size: var(--fs-sm);
  letter-spacing: 0.4em;
}
.ornament::before, .ornament::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-ember) 20%, var(--gold) 50%, var(--gold-ember) 80%, transparent);
}

/* Primitive: gold hairline card */
.panel {
  background: linear-gradient(180deg, var(--bg-raised) 0%, var(--bg-card) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
}
.panel::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(245,176,32,0.04), transparent 40%);
  pointer-events: none;
}

/* Button */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 12px 22px;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  background: transparent;
  color: var(--gold-bright);
  border: 1px solid var(--gold-deep);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 180ms ease;
  text-decoration: none;
}
.btn:hover {
  background: var(--gold-bright);
  color: var(--bg-deepest);
  box-shadow: 0 0 20px rgba(245,176,32,0.4);
}
.btn-primary {
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
  color: var(--bg-deepest);
  border-color: var(--gold-bright);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--text-bright) 0%, var(--gold-bright) 100%);
  box-shadow: 0 0 28px rgba(245,176,32,0.5);
}
.btn-crimson {
  color: var(--text-bright);
  border-color: var(--crimson);
  background: linear-gradient(180deg, var(--crimson) 0%, var(--crimson-deep) 100%);
}

/* Chips & badges */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
}
.chip.live { color: var(--text-bright); border-color: var(--crimson); background: rgba(201,48,0,0.18); }
.chip.online { color: var(--online-bright); border-color: rgba(126,207,92,0.4); }
.chip.offline { color: var(--text-bright); background: var(--crimson-deep); border-color: var(--crimson); }

/* Pulse dot */
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--online-bright);
  box-shadow: 0 0 8px var(--online-bright);
  animation: pulse 2.4s ease-in-out infinite;
}
.dot.red { background: var(--crimson); box-shadow: 0 0 10px var(--crimson); }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

/* Oil-painting placeholder — dark chiaroscuro panel */
.oil {
  position: relative;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(245,176,32,0.22), transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(201,48,0,0.18), transparent 55%),
    linear-gradient(135deg, #2a0c04 0%, #140400 50%, #0c0200 100%);
  overflow: hidden;
  border: 1px solid var(--line);
}
.oil::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.3  0 0 0 0 0.1  0 0 0 0.22 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.7;
}
.oil::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%);
}
.oil .oil-caption {
  position: absolute; bottom: 10px; left: 14px; right: 14px;
  font-family: 'Courier New', monospace;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  letter-spacing: 0.1em;
  z-index: 2;
  text-transform: uppercase;
}