/* root.css
* CSS custom properties only — no rules, no selectors beyond :root.
* All palette, typography, spacing, and transition tokens live here.
* Import this first so everything downstream can reference these vars.
*/

:root {
  
  /* ============================================================
  * PALETTE — Seraph by doaink1977 / ColourLovers #4326438
  * ============================================================ */
  
  /* Raw palette swatches — reference these in semantic vars below,
  * not directly in style.css */
  --swatch-void:          #000000; /* true black */
  --swatch-deep-purple:   #2B0F42; /* black+purple */
  --swatch-dark-crimson:  #400000; /* orange brown / dark blood */
  --swatch-amethyst:      #782D72; /* dark purple amethyst */
  --swatch-deep-violet:   #5E2B88; /* one for the road */
  
  /* ============================================================
  * SEMANTIC COLOUR TOKENS
  * ============================================================ */
  
  /* Backgrounds */
  --color-bg:             var(--swatch-void);
  --color-surface:        var(--swatch-deep-purple);
  --color-surface-alt:    var(--swatch-dark-crimson);
  
  /* Accents / interactive */
  --color-accent:         var(--swatch-amethyst);
  --color-accent-deep:    var(--swatch-deep-violet);
  
  /* Text */
  --color-text:           #f0e6f6; /* off-white with purple tint */
  --color-text-muted:     #b899d4; /* soft purple-grey */
  --color-text-warm:      #e8a0a0; /* warm muted for crimson surfaces */
  
  /* Borders */
  --color-border:         var(--swatch-deep-violet);
  --color-border-subtle:  var(--swatch-deep-purple);
  
  /* Links */
  --color-link:           #c97fd4; /* lighter amethyst — readable on dark bg */
  --color-link-visited:   #9b6fc7;
  --color-link-hover:     #f0e6f6;
  
  /* Focus ring — visible against all palette surfaces */
  --color-focus:          #e8c97a; /* warm gold — distinct from purple family */
  
  /* ============================================================
  * TYPOGRAPHY
  * ============================================================ */
  
  --font-body:    'Montserrat', Georgia, 'Times New Roman', serif;
  --font-ui:      system-ui, -apple-system, sans-serif;
  --font-monospace: 'VT323', monospace;
  --font-cursive:   'Give You Glory', cursive;
  --font-mono:    'Courier New', Courier, monospace;
  
  --font-size-base:   1rem;       /* 16px */
  --font-size-sm:     0.875rem;   /* 14px */
  --font-size-lg:     1.125rem;   /* 18px */
  --font-size-xl:     1.5rem;     /* 24px */
  --font-size-xxl:    2rem;       /* 32px */
  
  --line-height-body: 1.7;
  --line-height-heading: 1.2;
  
  /* ============================================================
  * SPACING
  * ============================================================ */
  
  --space-xs:   0.25rem;  /*  4px */
  --space-sm:   0.5rem;   /*  8px */
  --space-md:   1rem;     /* 16px */
  --space-lg:   1.5rem;   /* 24px */
  --space-xl:   2rem;     /* 32px */
  --space-xxl:  3rem;     /* 48px */
  
  /* ============================================================
  * BORDERS & RADIUS
  * ============================================================ */
  
  --border-width:     1px;
  --border-style:     solid;
  --border:           var(--border-width) var(--border-style) var(--color-border);
  
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    10px;
  
  /* ============================================================
  * TRANSITIONS
  * ============================================================ */
  
  --transition-fast:  150ms ease;
  --transition-base:  250ms ease;
}