/* ==========================================================================
   Narratiq — base.css
   Reset, design tokens, html/body, typography utilities.
   Loaded on every page via base.njk.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset & box model
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand colours */
  --ink-950: #050812;
  --ink-900: #080E1C;
  --ink-800: #0F1829;
  --ink-700: #172034;
  --ink-600: #1E2B45;
  --royal-700: #1B3070;
  --royal-600: #2040A0;
  --royal-500: #2D52C8;
  --royal-400: #4F6FE0;
  --royal-300: #7B97F0;
  --signal-600: #E05A0A;
  --signal-500: #F06A1A;
  --signal-400: #FF7E32;
  --warm-50:  #FAFAF8;
  --warm-100: #F4F3EE;
  --warm-200: #E8E6DE;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Elevation */
  --shadow-low:  0 1px 4px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-mid:  0 4px 20px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  --shadow-high: 0 20px 48px rgba(0,0,0,.18), 0 8px 20px rgba(0,0,0,.10);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--warm-50);
  color: #0F172A;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Typography utilities
   -------------------------------------------------------------------------- */
.display {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.gradient-text {
  background: linear-gradient(135deg, #7B97F0 0%, #FF7E32 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9CA3AF;
}