/* =====================================================================
   Suunnittelutokenit: värit, fontit, välit, varjot.
   Muuta ilmettä ensisijaisesti täältä.
   ===================================================================== */

:root {
  /* Brändivärit (logosta) */
  --navy-950: #070f20;
  --navy-900: #0b1630;
  --navy-800: #0f1e3e;
  --navy-700: #1b2c52;
  --navy-600: #2a3d68;
  --navy-100: #e8ecf4;
  --navy-50: #f3f5fa;

  --gold-600: #8a6631; /* kultainen teksti vaalealla taustalla (kontrasti AA) */
  --gold-500: #ab844a; /* brändikulta */
  --gold-400: #c9a46a;
  --gold-200: #ead9bb;
  --gold-100: #f6eedf;

  --paper: #f6f4f0;
  --white: #ffffff;
  --ink: #141a2a;
  --muted: #5c6577;
  --line: #e6e8ee;

  --success: #2f6b47;
  --danger: #a3302b;

  /* Fontit */
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-label: var(--font-display);

  /* Typografinen asteikko (sujuva näytön leveyden mukaan) */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.1rem, 1rem + 0.35vw, 1.25rem);
  --h4: 1.15rem;
  --h3: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --h2: clamp(1.85rem, 1.35rem + 1.8vw, 2.85rem);
  --h1: clamp(2.3rem, 1.6rem + 2.8vw, 4rem);
  --display: clamp(2.5rem, 1.6rem + 3.8vw, 5rem);

  /* Välit ja mitat */
  --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: 4.5rem;
  --space-9: clamp(4.5rem, 3rem + 5vw, 8rem);

  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  --header-h: 84px;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11, 22, 48, 0.06), 0 4px 14px -6px rgba(11, 22, 48, 0.12);
  --shadow: 0 2px 4px rgba(11, 22, 48, 0.04), 0 24px 48px -24px rgba(11, 22, 48, 0.28);
  --shadow-lg: 0 40px 80px -30px rgba(11, 22, 48, 0.45);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Lisäosan tyylien muuttujat */
  --color-blur: var(--navy-800);
  --color-gold: var(--gold-500);
}