/* ============================================
   variables.css — Design Tokens

   BACKGROUND COLOUR SYSTEM
   The site uses six coordinated background variables.
   Change ALL of them together when switching themes:

     --color-bg             → body + standard sections
     --color-surface        → alternate sections  (.section--alt)
     --color-surface-raised → cards, form panels, raised boxes
     --color-secondary      → footer background
     --color-secondary-mid  → portal banner, gradient areas
     --color-secondary-light→ nav hover, scrollbar thumb

   Also update for contrast:
     --color-text           → body text
     --color-text-muted     → secondary/subdued text
     --color-text-inverse   → text on primary-colour buttons
     --color-border         → dividers and card borders

   DARK THEME (default)
   --color-bg:              #0D1117;
   --color-surface:         #161B27;
   --color-surface-raised:  #1E2535;
   --color-secondary:       #1A1F2E;
   --color-secondary-mid:   #252C3F;
   --color-secondary-light: #2F3855;
   --color-text:            #F0F2F7;
   --color-text-muted:      #8A90A4;
   --color-text-inverse:    #0D1117;
   --color-border:          rgba(255,255,255,0.08);

   LIGHT THEME (example)
   --color-bg:              #FFFFFF;
   --color-surface:         #F4F6FA;
   --color-surface-raised:  #EAECF4;
   --color-secondary:       #E2E6F0;
   --color-secondary-mid:   #D4D9E8;
   --color-secondary-light: #C6CCDD;
   --color-text:            #0D1117;
   --color-text-muted:      #5A6070;
   --color-text-inverse:    #FFFFFF;
   --color-border:          rgba(0,0,0,0.10);
   ============================================ */

:root {

  /* ---- Accent / Brand ---- */
  --color-primary:        #E8A020;   /* buttons, links, highlights */
  --color-primary-dark:   #C4841A;
  --color-primary-light:  #F5C45E;

  /* ---- Background Palette (change all six together) ---- */
  --color-bg:              #0D1117;  /* body + standard sections   */
  --color-surface:         #161B27;  /* alternate sections          */
  --color-surface-raised:  #1E2535;  /* cards, form panels          */
  --color-secondary:       #1A1F2E;  /* footer                      */
  --color-secondary-mid:   #252C3F;  /* portal banner, gradients    */
  --color-secondary-light: #2F3855;  /* nav hover, scrollbar thumb  */

  /* ---- Text (update when switching light/dark) ---- */
  --color-text:            #F0F2F7;
  --color-text-muted:      #8A90A4;
  --color-text-inverse:    #0D1117;  /* text on primary-colour buttons */

  /* ---- Borders (update when switching light/dark) ---- */
  --color-border:          rgba(255,255,255,0.08);

  /* ---- Status ---- */
  --color-success: #2DD4BF;
  --color-danger:  #F05252;

  /* ---- Typography ---- */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

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

  /* ---- Border Radius ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   32px;
  --radius-pill: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm:   0 1px 3px  rgba(0,0,0,0.4);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 40px   rgba(232,160,32,0.25); /* matches --color-primary */

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --nav-height:    72px;
}