/* ==========================================================
   PAIGE ROSELYN - THE ARCHIVES
   CSS Custom Properties / Design Tokens
   ========================================================== */

:root {
  /* --- Brand Colors --- */
  --color-obsidian:       #0a0a0f;
  --color-obsidian-light: #12121a;
  --color-obsidian-mid:   #1a1a2e;
  --color-violet:         #7b2d8e;
  --color-violet-glow:    #a855f7;
  --color-violet-dim:     #4a1a5e;
  --color-bone:           #e8e0d4;
  --color-silver:         #9ca3af;
  --color-gold:           #c8962e;
  --color-gold-glow:      #e8b84a;

  /* --- Semantic Colors --- */
  --bg-primary:           var(--color-obsidian);
  --bg-surface:           var(--color-obsidian-light);
  --bg-elevated:          var(--color-obsidian-mid);
  --text-primary:         var(--color-bone);
  --text-secondary:       var(--color-silver);
  --text-accent:          var(--color-violet-glow);
  --border-color:         rgba(123, 45, 142, 0.3);
  --border-glow:          rgba(168, 85, 247, 0.5);

  /* --- Clearance Level Colors --- */
  --clearance-green:      #22c55e;
  --clearance-gold:       var(--color-gold);
  --clearance-violet:     var(--color-violet-glow);
  --clearance-redacted:   #ef4444;

  /* --- Typography --- */
  --font-display:         'Playfair Display', Georgia, serif;
  --font-signature:       'Sacramento', 'Livingst', cursive;
  --font-body:            'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-ui:              'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --text-xs:    0.8125rem;
  --text-sm:    0.9375rem;
  --text-base:  1.0625rem;
  --text-lg:    1.25rem;
  --text-xl:    1.4375rem;
  --text-2xl:   1.75rem;
  --text-3xl:   2.25rem;
  --text-4xl:   2.875rem;
  --text-5xl:   4rem;
  --text-hero:  clamp(2.75rem, 6.5vw, 5.5rem);

  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* --- Spacing --- */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  6rem;

  /* --- Layout --- */
  --content-width:  1200px;
  --narrow-width:   800px;
  --nav-height:     72px;

  /* --- Effects --- */
  --glow-violet:    0 0 20px rgba(168, 85, 247, 0.3),
                    0 0 40px rgba(168, 85, 247, 0.1);
  --glow-gold:      0 0 20px rgba(200, 150, 46, 0.3),
                    0 0 40px rgba(200, 150, 46, 0.1);
  --glow-text:      0 0 10px rgba(168, 85, 247, 0.5);

  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   600ms ease;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
}