/* Klarola design tokens — colors, type, spacing, shape */
:root {
  /* Brand colors */
  --mint: #6ee7d8;
  --blue: #2563eb;
  --navy: #1e3a8a;

  /* Neutrals (cool, near-monochrome) */
  --white: #ffffff;
  --bg: #f6f8fc;
  --bg-alt: #edf1f9;
  --bg-dark: #101a33;
  --ink: #101a33;
  --ink-soft: #4c5875;
  --ink-faint: #7c88a6;
  --border: #dde4f2;
  --border-soft: rgba(30, 58, 138, 0.12);
  --white-soft: rgba(255, 255, 255, 0.7);

  /* Status accents, kept close to the brand hue so the palette stays quiet */
  --ok: #279c86;
  --ok-bg: #e3f6f1;
  --warn: #cf4a5c;
  --warn-bg: #fbeaec;

  /* Gradients, matching the logo mark */
  --gradient-light: linear-gradient(135deg, var(--mint), var(--blue));
  --gradient-dark: linear-gradient(135deg, var(--blue), var(--navy));

  /* Type */
  --font-hero: 'Playpen Sans', 'Baloo 2', 'Quicksand', sans-serif;
  --font-heading: 'Baloo 2', 'Quicksand', sans-serif;
  --font-body: 'Quicksand', system-ui, -apple-system, sans-serif;
  --font-mono: 'SUSE Mono', 'Consolas', 'Courier New', monospace;

  /* Shape */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* Shadow, tinted navy to stay in-palette */
  --shadow-sm: 0 2px 8px rgba(16, 26, 51, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 26, 51, 0.10);
  --shadow-lg: 0 20px 48px rgba(16, 26, 51, 0.16);

  /* Glass */
  --blur-glass: 18px;

  /* Layout */
  --container-width: 1180px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
}