/* ============================================
   DESIGN TOKENS
   This is the primary file to edit when customising
   the visual theme. Change values here to retheme
   the entire site without touching page CSS.
   ============================================ */

:root {

  /* --- Colours ---
     Palette: muddy browns + greens, neon accents
     ------------------------------------------ */

  --c-bg:              #17130E;   /* page background — very dark muddy brown */
  --c-surface:         #231C14;   /* card / elevated surface */
  --c-border:          #4A3828;   /* default border */
  --c-border-light:    #6A5242;   /* lighter borders, dividers */

  --c-green-dark:      #1F2B1A;   /* deep muddy green */
  --c-green-mid:       #3D5030;   /* mid green */

  --c-accent-orange:   #FF4800;   /* neon orange — primary accent */
  --c-accent-yellow:   #F5DF00;   /* neon yellow — secondary accent */

  --c-text:            #EAE0D0;   /* primary text — warm off-white */
  --c-text-muted:      #A89880;   /* secondary / muted text */
  --c-text-dim:        #3D3028;   /* very muted, near-invisible */


  /* --- Typography ---
     Change font names here to swap typefaces globally
     ------------------------------------------------- */

  --font-body:         'Space Grotesk', sans-serif;
  --font-mono:         'Space Mono', 'Courier New', monospace;


  /* --- Spacing scale ---
     Consistent spacing derived from a base unit
     ------------------------------------------- */

  --sp-1:   0.25rem;   /*  4px */
  --sp-2:   0.5rem;    /*  8px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-12:  3rem;      /* 48px */
  --sp-16:  4rem;      /* 64px */
  --sp-24:  6rem;      /* 96px */


  /* --- Radius --- */

  --radius-card:   1.5rem;   /* rounded corners on all content cards */


  /* --- Borders --- */

  --border:        2px solid var(--c-border);
  --border-light:  1px solid var(--c-border);
  --border-accent: 2px solid var(--c-accent-orange);


  /* --- Shadows ---
     Hard offset style — classic brutalist web aesthetic
     --------------------------------------------------- */

  --shadow:         4px 4px 0 var(--c-border);
  --shadow-sm:      3px 3px 0 var(--c-border);
  --shadow-accent:  5px 5px 0 var(--c-accent-orange);
  --shadow-yellow:  5px 5px 0 var(--c-accent-yellow);


  /* --- Transitions --- */

  --t-fast:    100ms ease;
  --t-base:    180ms ease;
  --t-slow:    320ms ease;


  /* --- Layout --- */

  --max-width:    1100px;
  --page-pad:     var(--sp-8);
}