/* ==========================================================================
   Elolähde Consulting Oy – design tokens
   Lähde: design/tokens.css (Design System omistaa). site/ kopioi tämän
   tiedoston sellaisenaan eikä muokkaa sitä.
   Ilmepäätös: game-vault/decisions/2026-10-15-elolahde-visuaalinen-ilme.md

   Teemat
   - Oletus seuraa käyttöjärjestelmää (prefers-color-scheme) color-scheme-
     ominaisuuden kautta; light-dark(vaalea, tumma) valitsee arvon.
   - Pakotus: <html data-theme="light"> tai <html data-theme="dark">.
   - Kontrastit (WCAG 2.x) on merkitty kommenttiin muodossa vaalea / tumma.
     Kaikki tekstiparit ≥ 4,5:1, käyttöliittymän reunat ja fokus ≥ 3:1.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---- Brändipaletti (raakavärit, eivät muutu teeman mukana) ------------ */
  --el-lahde:          #1C4A55; /* Lähde – pääväri */
  --el-lahde-tumma:    #0F2A31; /* Lähde, tumma – tumman teeman pohja, alatunniste */
  --el-kupari:         #C2642B; /* Kupari – merkin pisteet, isot korostukset */
  --el-kupari-teksti:  #A4521F; /* Kupari, teksti – pieni teksti vaalealla */
  --el-kupari-vaalea:  #D98A55; /* Kupari, vaalea – tummalla pohjalla */
  --el-muste:          #16191D; /* Muste – leipäteksti */
  --el-harmaa:         #5A6168; /* Harmaa – toissijainen teksti */
  --el-pinta:          #F3F5F4; /* Pinta – vaalea taustapinta */
  --el-viiva:          #DCE1E2; /* Viiva – vaalea reuna */
  --el-lumi:           #E9EEEC; /* Lumi – teksti tummalla pohjalla */
  --el-valkoinen:      #FFFFFF;

  /* ---- Semanttiset värit: light-dark(vaalea, tumma) --------------------- */
  /* Pohjat */
  --color-bg:              light-dark(#FFFFFF, #0F2A31);
  --color-surface:         light-dark(#F3F5F4, #163841); /* kortit, vuorottelevat osiot */
  --color-surface-strong:  light-dark(#E4EAE9, #1E434D); /* kuvapaikat, korostetut pinnat */
  --color-bg-brand:        #1C4A55;                       /* yhteysosio, sama molemmissa */
  --color-bg-footer:       light-dark(#0F2A31, #0A1F25);

  /* Teksti */
  --color-text:            light-dark(#16191D, #E9EEEC); /* 17,6 / 12,8 pohjalla; 16,1 / 10,7 pinnalla */
  --color-text-soft:       light-dark(#3F464D, #C9D4D6); /* 9,6 / 9,9 – leipäteksti korteissa */
  --color-text-secondary:  light-dark(#5A6168, #A9BCBF); /* 6,3 / 7,6 pohjalla; 5,7 / 6,3 pinnalla */
  --color-text-on-brand:   #FFFFFF;                       /* 9,7 Lähteellä */
  --color-text-on-brand-soft: #D4E0E1;                    /* 7,2 Lähteellä */
  --color-text-footer:     #9FB4B6;                       /* 6,9 / 7,8 */
  --color-link-on-brand:   #FFFFFF;                       /* linkit yhteysosiossa, alleviivattuina: 9,7 */
  --color-link-footer:     #D4E0E1;                       /* linkit alatunnisteessa, alleviivattuina: 12,0 / 13,6 */

  /* Brändi ja toiminnot */
  --color-brand:           light-dark(#1C4A55, #8CC5CE); /* linkit, ensisijainen painike: 9,7 / 7,9 */
  --color-brand-hover:     light-dark(#0F2A31, #A9D5DC);
  --color-on-brand:        light-dark(#FFFFFF, #0F2A31); /* teksti --color-brand-pinnalla: 9,7 / 7,9 */
  --color-link:            var(--color-brand);
  --color-link-hover:      var(--color-brand-hover);

  /* Kupari: grafiikkaan ja isoon (≥ 24 px tai ≥ 19 px lihavoituna) tekstiin */
  --color-accent:          light-dark(#C2642B, #D98A55); /* 4,1 / 5,5 – EI pieneen tekstiin vaalealla */
  /* Kupari pienessä tekstissä */
  --color-accent-text:     light-dark(#A4521F, #E39A68); /* 5,5 / 6,5 pohjalla; 5,0 / 5,4 pinnalla */

  /* Reunat ja fokus */
  --color-border:          light-dark(#DCE1E2, #2F5660); /* koristeellinen */
  --color-border-strong:   light-dark(#5A6168, #A9BCBF); /* lomakekentät, ≥ 3:1 */
  --color-focus:           light-dark(#C2642B, #D98A55); /* 4,1 / 5,5 pohjaa vasten */
  --color-focus-on-brand:  #D98A55;                       /* fokus yhteysosiossa ja alatunnisteessa: 3,6 Lähteellä, ≥ 5,5 alatunnisteella */

  /* Logo inline-SVG:nä (stroke → --color-logo-arc, fill → --color-logo-dots) */
  --color-logo-arc:        light-dark(#1C4A55, #E9EEEC);
  --color-logo-dots:       light-dark(#C2642B, #D98A55);
  --color-logo-text:       var(--color-text);
  /* Logo alatunnisteessa (pohja on tumma molemmissa teemoissa) */
  --color-logo-arc-footer:  #E9EEEC;
  --color-logo-dots-footer: #D98A55;

  /* ---- Typografia -------------------------------------------------------- */
  --font-heading: "Albert Sans", "Segoe UI", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

  --weight-heading:       650; /* Albert Sans: "Elolähde", otsikot */
  --weight-heading-light: 400; /* Albert Sans: "Consulting", alaotsikot */
  --weight-body:          400;
  --weight-medium:        500; /* painikkeet, korostukset leipätekstissä */

  /* Kokoasteikko (px → rem, 16 px pohja). clamp-arvot skaalautuvat leveyden mukaan. */
  --text-xs:   0.8125rem;                          /* 13 px – kuvatekstit, metatiedot */
  --text-sm:   0.875rem;                           /* 14 px – alatunniste, apuviestit */
  --text-base: 0.9375rem;                          /* 15 px – valikko, nappitekstit */
  --text-md:   1.0625rem;                          /* 17 px – leipäteksti */
  --text-lg:   clamp(1.0625rem, 0.9rem + 0.8vw, 1.25rem);   /* 17–20 px – ingressi */
  --text-xl:   1.375rem;                           /* 22 px – h3 */
  --text-2xl:  clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);      /* 28–40 px – h2 */
  --text-3xl:  clamp(2.375rem, 1.5rem + 3vw, 4rem);       /* 38–64 px – h1 */

  --leading-tight:   1.08; /* h1 */
  --leading-heading: 1.15; /* h2 */
  --leading-snug:    1.3;  /* h3, kortin otsikot */
  --leading-body:    1.6;

  --tracking-display: -0.02em; /* h1 */
  --tracking-heading: -0.01em; /* h2, sanamerkki */

  /* ---- Välit (4 px:n askel) ---------------------------------------------- */
  --space-1:  0.25rem;  /*   4 px */
  --space-2:  0.5rem;   /*   8 px */
  --space-3:  0.75rem;  /*  12 px */
  --space-4:  1rem;     /*  16 px */
  --space-5:  1.5rem;   /*  24 px */
  --space-6:  2rem;     /*  32 px */
  --space-7:  2.5rem;   /*  40 px */
  --space-8:  3rem;     /*  48 px */
  --space-9:  4rem;     /*  64 px */
  --space-10: 6rem;     /*  96 px */

  --space-section: clamp(3.5rem, 8vw, 6.5rem);  /* 56–104 px osion pystyväli */
  --space-hero:    clamp(3.5rem, 9vw, 7.5rem);  /* 56–120 px */
  --container:     70rem;                        /* 1120 px */
  --gutter:        clamp(1rem, 4vw, 1.5rem);     /* 16–24 px sivureuna */

  /* ---- Kulmat ------------------------------------------------------------ */
  --radius-sm:   0.625rem; /* 10 px – painikkeet */
  --radius-md:   0.75rem;  /* 12 px – pienet kortit, kentät */
  --radius-lg:   1rem;     /* 16 px – kortit, paneelit */
  --radius-full: 999px;

  /* ---- Varjot (ilme on tasainen; varjo vain nostetuille elementeille) ---- */
  --shadow-sm: 0 1px 2px light-dark(rgb(22 25 29 / 0.06), rgb(0 0 0 / 0.4));
  --shadow-md: 0 4px 16px light-dark(rgb(22 25 29 / 0.08), rgb(0 0 0 / 0.5));
  --shadow-lg: 0 12px 32px light-dark(rgb(22 25 29 / 0.12), rgb(0 0 0 / 0.6));

  /* ---- Fokus ja liike ---------------------------------------------------- */
  --focus-ring: 0 0 0 3px var(--color-focus);

  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1); /* myös logoanimaatio */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* Tasot */
  --z-header: 10;
  --z-overlay: 100;
}


/* Selaimet ilman light-dark()-tukea (Firefox < 120, Chrome < 123, Safari < 17.5):
   vaalean teeman arvot, jotta kiinteät ja teemaan sidotut värit pysyvät pareina. */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    color-scheme: light;
    --color-bg: #FFFFFF;
    --color-surface: #F3F5F4;
    --color-surface-strong: #E4EAE9;
    --color-bg-footer: #0F2A31;
    --color-text: #16191D;
    --color-text-soft: #3F464D;
    --color-text-secondary: #5A6168;
    --color-brand: #1C4A55;
    --color-brand-hover: #0F2A31;
    --color-on-brand: #FFFFFF;
    --color-accent: #C2642B;
    --color-accent-text: #A4521F;
    --color-border: #DCE1E2;
    --color-border-strong: #5A6168;
    --color-focus: #C2642B;
    --color-logo-arc: #1C4A55;
    --color-logo-dots: #C2642B;
    --shadow-sm: 0 1px 2px rgb(22 25 29 / 0.06);
    --shadow-md: 0 4px 16px rgb(22 25 29 / 0.08);
    --shadow-lg: 0 12px 32px rgb(22 25 29 / 0.12);
  }
}

/* Pakotettu teema ohittaa käyttöjärjestelmän asetuksen. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* Liikettä vähentävä asetus: siirtymät käytännössä pois (1 ms, jotta
   transitionend/animationend laukeavat yhä). Logoanimaation pysäytys on
   sivuston CSS:n vastuulla (ks. design/README.md). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
  }
}