/*
 * Design tokens — single source of truth.
 * All other CSS files consume these vars.
 * Source: brief.json > design_tokens
 */

:root {
  /* Colours */
  --color-bg:            #0a0a0a;
  --color-surface:       #111111;
  --color-surface-raised:#181818;
  --color-navy:          #001d34;
  --color-teal:          #59f0d2;
  --color-orange:        #ffa839;
  --color-orange-hover:  #e8922a;
  --color-charcoal:      #4b4f58;
  --color-text:          #f5f5f5;
  --color-text-muted:    #9a9a9a;
  --color-text-on-light: #0a0a0a;
  --color-border:        rgba(255, 255, 255, 0.08);

  /* Typography */
  --font-heading: 'Oswald', 'Calibri', sans-serif;
  --font-body:    'Abel',   'Calibri', sans-serif;

  /* Border radius — sharp by default */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* Shadows */
  --shadow-card:        0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-hover:       0 0 0 1px #59f0d2, 0 8px 40px rgba(89, 240, 210, 0.15);
  --shadow-glow-teal:   0 0 24px rgba(89, 240, 210, 0.25);
  --shadow-glow-orange: 0 0 24px rgba(255, 168, 57, 0.3);

  /* Motion */
  --duration-fast:   120ms;
  --duration-base:   240ms;
  --duration-slow:   480ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: var(--duration-base) var(--easing-standard);

  /* Grid overlay */
  --grid-line: rgba(255, 255, 255, 0.04);
  --grid-size: 80px;

  /* Layout */
  --max-width:              1200px;
  --gutter:                 1.5rem;
  --section-padding:        8rem 0;
  --section-padding-mobile: 4.5rem 0;
}