/*
 * Siirtymäsilta vanhalle Bricks-sisällölle. Ladataan tiedoston
 * scr-foundation.css jälkeen vain niin kauan kuin sivustolla on sisältöä,
 * joka käyttää ACSS:n muuttujia, ACSS:n apuluokkia tai site-*-luokkia.
 * Kun sisältö on siirretty c-*- ja l-*-luokkiin, tämä tiedosto poistetaan.
 * Uutta koodia ei kirjoiteta näitä nimiä vasten.
 */

@layer scr.legacy {
  /* Vanha sisältö on kirjoitettu oletuksella 1rem = 10px */
  html {
    font-size: 62.5%;
  }

  :root {
    --u: 0.1rem;
  }

  :root,
  [data-theme] {
    /* ACSS:n muuttujanimet → uudet tokenit */
    --primary: var(--theme-brand);
    --primary-hover: var(--theme-brand-hover);
    --primary-medium: oklch(58.4% 0.227 28.1);
    --secondary: var(--color-gold-500);
    --secondary-hover: var(--color-gold-400);
    --secondary-light: var(--color-gold-200);
    --tertiary: var(--color-brown-600);
    --tertiary-hover: var(--color-brown-500);
    --neutral: var(--theme-ink);
    --neutral-dark: var(--color-grey-800);
    --neutral-semi-dark: oklch(46.4% 0 0);
    --neutral-light: var(--color-grey-300);
    --neutral-ultra-light: oklch(96.1% 0 0);
    --white: var(--color-white);
    --black: var(--color-black);
    --text-dark: var(--theme-ink);
    --text-light: var(--color-white);
    --body-bg-color: var(--theme-page);
    --light-bg: var(--theme-page);
    --heading-light: var(--color-beige-100);

    --primary-trans-50: color-mix(in oklch, var(--theme-brand) 50%, transparent);
    --primary-trans-80: color-mix(in oklch, var(--theme-brand) 80%, transparent);
    --secondary-trans-10: color-mix(in oklch, var(--color-gold-500) 10%, transparent);
    --secondary-trans-40: color-mix(in oklch, var(--color-gold-500) 40%, transparent);
    --secondary-light-trans-20: color-mix(in oklch, var(--color-gold-200) 20%, transparent);
    --secondary-light-trans-30: color-mix(in oklch, var(--color-gold-200) 30%, transparent);
    --neutral-trans-20: color-mix(in oklch, var(--theme-ink) 20%, transparent);
    --neutral-trans-70: color-mix(in oklch, var(--theme-ink) 70%, transparent);
    --neutral-light-trans-20: color-mix(in oklch, var(--color-grey-300) 20%, transparent);
    --black-trans-10: oklch(0% 0 0 / 0.1);
    --black-trans-20: oklch(0% 0 0 / 0.2);
    --black-trans-30: oklch(0% 0 0 / 0.3);
    --black-trans-50: oklch(0% 0 0 / 0.5);
    --black-trans-60: oklch(0% 0 0 / 0.6);
    --black-trans-80: oklch(0% 0 0 / 0.8);
    --white-trans-20: oklch(100% 0 0 / 0.2);
    --white-trans-50: oklch(100% 0 0 / 0.5);
    --white-trans-60: oklch(100% 0 0 / 0.6);
    --white-trans-80: oklch(100% 0 0 / 0.8);

    --space-xxl: var(--space-2xl);
    --section-space-m: var(--space-section);
    --section-space-xl: calc(var(--space-section) * 2.25);
    --section-space-xxl: calc(var(--space-section) * 3.4);
    --gutter: var(--space-gutter);
    --section-padding-x: var(--space-gutter);
    --container-gap: var(--space-xl);
    --content-width: var(--width-content);
    --width-m: calc(var(--width-content) * 0.4);
    --width-l: calc(var(--width-content) * 0.6);
    --radius: calc(var(--u) * 10);
    --radius-xs: calc(var(--u) * 4.4);
    --radius-circle: var(--radius-pill);
    --box-shadow-m: var(--shadow-m);
    --h3: var(--text-2xl);
    --grid-1: repeat(1, minmax(0, 1fr));
    --grid-2: repeat(2, minmax(0, 1fr));
    --grid-3: repeat(3, minmax(0, 1fr));
    --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
    --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
  }

  /* ACSS:n apuluokat, joita sisältö käyttää */
  .section--m { padding-block: var(--space-section); padding-inline: var(--space-gutter); }

  .grid--2, .grid--3, .grid--4, .grid--1-2, .grid--2-1, .grid--2-3, .grid--3-2 {
    display: grid !important;
    inline-size: 100%;
    gap: var(--space-m);
  }

  .grid--2 { grid-template-columns: var(--grid-2); }
  .grid--3 { grid-template-columns: var(--grid-3); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .grid--2-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .grid--3-2 { grid-template-columns: var(--grid-3-2); }

  @media (width <= 768px) {
    .grid--m-1 { grid-template-columns: var(--grid-1); }
    .grid--m-1 > * { grid-column: 1 !important; }
  }

  @media (width <= 480px) {
    .grid--s-1 { grid-template-columns: var(--grid-1); }
    .grid--s-1 > * { grid-column: 1 !important; }
  }

  .gap--s.gap--s { gap: var(--space-s); }
  .gap--m.gap--m { gap: var(--space-m); }
  .gap--l.gap--l { gap: var(--space-l); }
  .gap--xl.gap--xl { gap: var(--space-xl); }
  .gap--xxl.gap--xxl { gap: var(--space-2xl); }

  .center--all.center--all {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .center--self.center--self { margin-inline: auto; }
  .stretch.stretch { align-items: stretch; justify-content: stretch; justify-items: stretch; }
  .list--none, .list--none > :is(ul, ol) { margin-block: 0; padding-inline-start: 0; list-style: none; }

  .clickable-parent:not(a) { position: relative; }
  .clickable-parent:not(a) > a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

  .hidden-accessible {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Sivuston vanhat omat luokat → uudet tokenit */
  .site-btn {
    padding: calc(var(--u) * 12) calc(var(--u) * 24);
    border-radius: var(--radius-pill);
    background: var(--action-bg);
    color: var(--action-text);
    font-family: var(--action-font);
    font-size: var(--text-m);
    font-weight: var(--action-weight);
    line-height: var(--leading-normal);
    text-transform: var(--action-transform);
  }

  .site-btn--beige {
    border: 2px solid var(--theme-brand);
    background: var(--color-beige-100);
    color: var(--theme-brand);
  }

  .site-h2,
  .taava-h3 {
    color: var(--color-heading);
    font-family: var(--font-heading);
    font-size: var(--text-display);
    font-weight: var(--heading-weight);
    line-height: var(--leading-tight);
    text-transform: var(--heading-transform);
  }

  .site-bg { background-color: var(--theme-surface); }
}