/* tokens.css — Brand Design Tokens */

/* 1. Font Face Declarations (Self-hosted Geist Fonts) */
@font-face {
  font-family: 'Geist Sans';
  src: url('../assets/fonts/GeistSans-Variable.woff2') format('woff2-variations'),
       url('../assets/fonts/GeistSans-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('../assets/fonts/GeistMono-Variable.woff2') format('woff2-variations'),
       url('../assets/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 2. Design Token Variables */
:root {
  /* Colour Palette — Slate Dark Theme */
  --color-bg:            #020617;    /* Deep slate background */
  --color-bg-elevated:   #0a0f24;    /* Slate-900 elevated */
  --color-bg-surface:    #131b35;    /* Glassmorphism surface */
  --color-text:          #f8fafc;    /* Clean white/slate-50 */
  --color-text-muted:    #94a3b8;    /* Muted grey/slate-400 */
  --color-border:        #1e293b;    /* Borders/slate-800 */
  --color-border-hover:  #334155;    /* Hover borders/slate-700 */

  /* Primary Accent — Brand Blue Gradients */
  --color-primary-600:   #1d4ed8;
  --color-primary-500:   #3b82f6;
  --color-primary-400:   #60a5fa;
  --color-primary-glow:  rgba(59, 130, 246, 0.15);

  /* Status Colours */
  --color-success:       #10b981;    /* Emerald Green */
  --color-warning:       #f59e0b;    /* Amber Orange */
  --color-error:         #ef4444;    /* Crimson Red */

  /* Secondary Brand Accent — used in logo mark and ambient glows */
  --color-accent-purple: #8b5cf6;

  /* Typography Pairings (Norman & Krug principles) */
  --font-display: 'Outfit', 'Geist Sans', system-ui, -apple-system, sans-serif;
  --font-sans:    'Geist Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  /* Type Scale */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;

  /* Spacing Scale */
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-20:   5rem;
  --space-24:   6rem;

  /* Border Radii */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* Premium Shadows & Glows */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 12px 24px -4px rgba(0, 0, 0, 0.5);
  --shadow-xl:   0 24px 48px -12px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 40px rgba(59, 130, 246, 0.12);
  --shadow-glow-emerald: 0 0 40px rgba(16, 185, 129, 0.1);
  --shadow-glow-amber: 0 0 40px rgba(245, 158, 11, 0.1);
  --shadow-glow-purple: 0 0 40px rgba(139, 92, 246, 0.1);

  /* Transitions */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout Constants */
  --container-max: 1200px;
  --nav-height:    4.5rem;
}