/* ═══════════════════════════════════════════
   EXTREMUS OBSCURA — Design Tokens
   ═══════════════════════════════════════════ */

:root {
  /* ── Colors ── */
  --obsidian:   #0A0A0F;
  --graphite:   #1C1C24;
  --iron:       #3A3D46;
  --iron-text:  #787882;     /* 4.52:1 on obsidian — accessible muted text */
  --iron-text-card: #848490; /* 4.58:1 on graphite — muted text inside cards */
  --ash:        #4A4A56;
  --ash-text:   #848490;     /* 5.35:1 on obsidian — accessible text variant */
  --silver:     #B9BCC5;
  --platinum:   #E5E4E2;
  --bone:       #E8E0D4;
  --arterial:   #8B1A1A;

  /* ── Semantic ── */
  --bg-primary:    var(--obsidian);
  --bg-secondary:  var(--graphite);
  --bg-card:       var(--graphite);
  --text-primary:  var(--bone);
  --text-secondary: var(--ash-text);
  --text-muted:    var(--iron-text);
  --accent:        var(--silver);
  --accent-rare:   var(--platinum);
  --danger:        var(--arterial);
  --border:        var(--iron);

  /* ── Typography ── */
  --font-display: 'EB Garamond', 'Georgia', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Type Scale (1.25 ratio) ── */
  --text-xs:   0.64rem;   /* 10.24px */
  --text-sm:   0.8rem;    /* 12.8px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.563rem;  /* 25px */
  --text-2xl:  1.953rem;  /* 31.25px */
  --text-3xl:  2.441rem;  /* 39px */
  --text-4xl:  3.052rem;  /* 48.83px */
  --text-hero: 4.5rem;    /* 72px */

  /* ── Spacing (8px base) ── */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* ── Layout ── */
  --max-width:   72rem;   /* 1152px */
  --max-narrow:  42rem;   /* 672px */
  --max-wide:    90rem;   /* 1440px */
  --gutter:      var(--space-6);

  /* ── Borders ── */
  --border-thin:  1px solid var(--border);
  --border-hair:  1px solid rgba(58, 61, 70, 0.4);

  /* ── Transitions ── */
  --ease-default: 0.3s ease;
  --ease-slow:    0.6s ease;
}