/*
 * GENEROITU TIEDOSTO – älä muokkaa käsin.
 * Lähde: packages/tokens/tokens.js. Aja juuressa: npm run tokens
 * Muokkaukset tähän katoavat seuraavassa ajossa, ja --check-ajo huomaa ne.
 */
:root {
  /* Värit roolin mukaan (vaalea) */
  --c-bg: #E8EBF1;
  --c-surface: #FBF8F2;
  --c-surface-2: #DFE3EB;
  --c-ink: #1C2742;
  --c-ink-mid: #4F5A73;
  --c-accent: #9A5A20;
  --c-accent-ink: #FFFAF2;
  --c-accent-soft: #F1DFCB;
  --c-accent-text: #9A5A20;
  --c-highlight: #D8E0F0;
  --c-highlight-ink: #22396A;
  --c-border: #CED3DF;
  --c-success: #2A6B4A;
  --c-warning: #8C5B0A;
  --c-danger: #B23B3B;
  --c-hero-from: #C9D3EA;
  --c-hero-mid: #E3DAE6;
  --c-hero-to: #F3DCC4;

  /* Fontit */
  --font-display: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-story: 'Literata', Georgia, 'Times New Roman', serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Typografia: koko px, riviväli suhdelukuna, välistys em-yksikkönä */
  --t-display-xl-size: 32px;
  --t-display-xl-line-height: 1.156;
  --t-display-xl-weight: 700;
  --t-display-xl-tracking: -0.015em;
  --t-display-xl-font: var(--font-display);
  --t-h1-size: 28px;
  --t-h1-line-height: 1.179;
  --t-h1-weight: 700;
  --t-h1-tracking: -0.015em;
  --t-h1-font: var(--font-display);
  --t-h2-size: 22px;
  --t-h2-line-height: 1.273;
  --t-h2-weight: 700;
  --t-h2-tracking: -0.015em;
  --t-h2-font: var(--font-display);
  --t-body-large-size: 21px;
  --t-body-large-line-height: 1.524;
  --t-body-large-weight: 500;
  --t-body-large-tracking: 0;
  --t-body-large-font: var(--font-body);
  --t-body-size: 17px;
  --t-body-line-height: 1.588;
  --t-body-weight: 500;
  --t-body-tracking: 0;
  --t-body-font: var(--font-body);
  --t-story-size: 18px;
  --t-story-line-height: 1.611;
  --t-story-weight: 400;
  --t-story-tracking: 0;
  --t-story-font: var(--font-story);
  --t-caption-size: 14px;
  --t-caption-line-height: 1.429;
  --t-caption-weight: 500;
  --t-caption-tracking: 0;
  --t-caption-font: var(--font-body);

  /* Muoto */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* Tila */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 64px;

  /* Koot */
  --size-tap-min: 56px;
  --size-puhu: 160px;
  --size-phone-width: 375px;

  /* Varjot */
  --shadow-card: 0 10px 28px rgba(28, 39, 66, 0.16);
  --shadow-puhu: 0 22px 50px rgba(28, 39, 66, 0.18);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #0E1526;
    --c-surface: #172038;
    --c-surface-2: #0A101D;
    --c-ink: #EEE6D8;
    --c-ink-mid: #A8B0C3;
    --c-accent: #E2A563;
    --c-accent-ink: #1B1206;
    --c-accent-soft: #3A3024;
    --c-accent-text: #E2A563;
    --c-highlight: #24325C;
    --c-highlight-ink: #CAD6F4;
    --c-border: #2B3654;
    --c-success: #86C9A0;
    --c-warning: #EBC06A;
    --c-danger: #F08A80;
    --c-hero-from: #0F1830;
    --c-hero-mid: #282847;
    --c-hero-to: #53372A;
    --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.5);
    --shadow-puhu: 0 22px 50px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --c-bg: #0E1526;
  --c-surface: #172038;
  --c-surface-2: #0A101D;
  --c-ink: #EEE6D8;
  --c-ink-mid: #A8B0C3;
  --c-accent: #E2A563;
  --c-accent-ink: #1B1206;
  --c-accent-soft: #3A3024;
  --c-accent-text: #E2A563;
  --c-highlight: #24325C;
  --c-highlight-ink: #CAD6F4;
  --c-border: #2B3654;
  --c-success: #86C9A0;
  --c-warning: #EBC06A;
  --c-danger: #F08A80;
  --c-hero-from: #0F1830;
  --c-hero-mid: #282847;
  --c-hero-to: #53372A;
  --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.5);
  --shadow-puhu: 0 22px 50px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}