/* Design tokens, generoitu: node rakenna/build-tokens.cjs. Älä muokkaa käsin – muokkaa rakenna/tokens.json. */
/* Kolme kerrosta: primitive (raaka arvo) -> semantic (tarkoitus) -> component (osa). Viittaukset ovat var()-ketjuja. */

/* === PRIMITIVES === */
:root {
  --primitive-color-white: #ffffff;
  --primitive-color-mist-100: #eef2f7;
  --primitive-color-line-200: #cfd7e3;
  --primitive-color-line-400: #8d99ae;
  --primitive-color-slate-300: #c4cde0;
  --primitive-color-slate-600: #4b566b;
  --primitive-color-ink-700: #33415c;
  --primitive-color-ink-900: #14213d;
  --primitive-color-blue-600: #34589e;
  --primitive-color-blue-700: #2a4885;
  --primitive-color-blue-800: #223a6c;
  --primitive-spacing-0: 0;
  --primitive-spacing-1: 0.25rem;
  --primitive-spacing-2: 0.5rem;
  --primitive-spacing-3: 0.75rem;
  --primitive-spacing-4: 1rem;
  --primitive-spacing-5: 1.25rem;
  --primitive-spacing-6: 1.5rem;
  --primitive-spacing-8: 2rem;
  --primitive-spacing-10: 2.5rem;
  --primitive-spacing-12: 3rem;
  --primitive-spacing-14: 3.5rem;
  --primitive-spacing-16: 4rem;
  --primitive-spacing-20: 5rem;
  --primitive-spacing-24: 6rem;
  --primitive-spacing-0-5: 0.125rem;
  --primitive-spacing-fluid-section: clamp(4rem, 2.6rem + 5.2vw, 7rem);
  --primitive-spacing-fluid-gutter: clamp(1.25rem, 0.5rem + 3vw, 2rem);
  --primitive-fontSize-sm: 0.9375rem;
  --primitive-fontSize-base: 1.0625rem;
  --primitive-fontSize-lg: 1.375rem;
  --primitive-fontSize-fluid-body: clamp(1.0625rem, 1.01rem + 0.22vw, 1.1875rem);
  --primitive-fontSize-fluid-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  --primitive-fontSize-fluid-h2: clamp(1.875rem, 1.3rem + 2vw, 2.75rem);
  --primitive-fontSize-fluid-h1: clamp(2.125rem, 1.3rem + 3.6vw, 4.25rem);
  --primitive-fontSize-fluid-display: clamp(2.375rem, 1.4rem + 4.2vw, 4.75rem);
  --primitive-fontSize-fluid-lead: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --primitive-fontWeight-regular: 400;
  --primitive-fontWeight-semibold: 600;
  --primitive-lineHeight-tight: 1.05;
  --primitive-lineHeight-snug: 1.15;
  --primitive-lineHeight-normal: 1.45;
  --primitive-lineHeight-relaxed: 1.6;
  --primitive-letterSpacing-tight: -0.01em;
  --primitive-letterSpacing-normal: 0;
  --primitive-fontFamily-condensed: "IBM Plex Sans Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --primitive-fontFamily-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --primitive-radius-none: 0;
  --primitive-radius-sm: 0.125rem;
  --primitive-radius-md: 0.25rem;
  --primitive-radius-lg: 0.375rem;
  --primitive-borderWidth-thin: 1px;
  --primitive-borderWidth-medium: 2px;
  --primitive-borderWidth-thick: 3px;
  --primitive-size-container: 75rem;
  --primitive-size-measure: 38em;
  --primitive-size-measure-narrow: 30em;
  --primitive-size-touch: 2.75rem;
  --primitive-size-button: 3.25rem;
  --primitive-size-logo: 3rem;
  --primitive-size-rail: 17.5rem;
  --primitive-size-label: 11rem;
  --primitive-ratio-landscape: 4 / 3;
  --primitive-ratio-portrait: 4 / 5;
  --primitive-duration-fast: 150ms;
  --primitive-z-bar: 40;
  --primitive-z-skip: 100;
}

/* === SEMANTIC === */
:root {
  --color-background: var(--primitive-color-white);
  --color-foreground: var(--primitive-color-ink-900);
  --color-muted-foreground: var(--primitive-color-slate-600);
  --color-surface: var(--primitive-color-mist-100);
  --color-border: var(--primitive-color-line-200);
  --color-border-strong: var(--primitive-color-line-400);
  --color-primary: var(--primitive-color-blue-600);
  --color-primary-hover: var(--primitive-color-blue-700);
  --color-primary-active: var(--primitive-color-blue-800);
  --color-primary-foreground: var(--primitive-color-white);
  --color-ring: var(--primitive-color-blue-600);
  --color-inverse-background: var(--primitive-color-ink-900);
  --color-inverse-foreground: var(--primitive-color-white);
  --color-inverse-muted-foreground: var(--primitive-color-slate-300);
  --color-inverse-ring: var(--primitive-color-white);
  --color-inverse-border: var(--primitive-color-ink-700);
  --spacing-component-xs: var(--primitive-spacing-2);
  --spacing-component-sm: var(--primitive-spacing-3);
  --spacing-component: var(--primitive-spacing-4);
  --spacing-component-lg: var(--primitive-spacing-6);
  --spacing-stack-sm: var(--primitive-spacing-4);
  --spacing-stack: var(--primitive-spacing-6);
  --spacing-stack-lg: var(--primitive-spacing-10);
  --spacing-stack-xl: var(--primitive-spacing-16);
  --spacing-section: var(--primitive-spacing-fluid-section);
  --spacing-gutter: var(--primitive-spacing-fluid-gutter);
  --font-heading: var(--primitive-fontFamily-condensed);
  --font-body: var(--primitive-fontFamily-sans);
  --font-size-body: var(--primitive-fontSize-fluid-body);
  --font-size-caption: var(--primitive-fontSize-sm);
  --font-size-h3: var(--primitive-fontSize-fluid-h3);
  --font-size-h2: var(--primitive-fontSize-fluid-h2);
  --font-size-h1: var(--primitive-fontSize-fluid-h1);
  --font-size-display: var(--primitive-fontSize-fluid-display);
  --font-size-lead: var(--primitive-fontSize-fluid-lead);
  --font-size-ui: var(--primitive-fontSize-base);
  --layout-container: var(--primitive-size-container);
  --layout-measure: var(--primitive-size-measure);
  --layout-rail: var(--primitive-size-rail);
  --layout-label: var(--primitive-size-label);
  --layout-measure-narrow: var(--primitive-size-measure-narrow);
  --layout-ratio-landscape: var(--primitive-ratio-landscape);
  --layout-ratio-portrait: var(--primitive-ratio-portrait);
  --interaction-ring-width: var(--primitive-borderWidth-thick);
  --interaction-ring-offset: var(--primitive-spacing-0-5);
  --interaction-transition: var(--primitive-duration-fast);
  --leading-heading: var(--primitive-lineHeight-tight);
  --leading-subheading: var(--primitive-lineHeight-snug);
  --leading-ui: var(--primitive-lineHeight-normal);
  --leading-body: var(--primitive-lineHeight-relaxed);
  --tracking-heading: var(--primitive-letterSpacing-tight);
  --weight-regular: var(--primitive-fontWeight-regular);
  --weight-strong: var(--primitive-fontWeight-semibold);
  --radius-control: var(--primitive-radius-lg);
  --radius-media: var(--primitive-radius-md);
  --border-hairline: var(--primitive-borderWidth-thin);
  --border-rule: var(--primitive-borderWidth-medium);
  --layer-bar: var(--primitive-z-bar);
  --layer-skip: var(--primitive-z-skip);
  --size-touch: var(--primitive-size-touch);
  --size-logo: var(--primitive-size-logo);
  --size-control: var(--primitive-size-button);
}

/* === COMPONENTS === */
:root {
  --button-bg: var(--color-primary);
  --button-fg: var(--color-primary-foreground);
  --button-hover-bg: var(--color-primary-hover);
  --button-active-bg: var(--color-primary-active);
  --button-border-width: var(--border-rule);
  --button-radius: var(--radius-control);
  --button-padding-x: var(--spacing-component-lg);
  --button-padding-y: var(--spacing-component-sm);
  --button-min-height: var(--size-control);
  --button-font-family: var(--font-body);
  --button-font-size: var(--font-size-ui);
  --button-font-weight: var(--weight-strong);
  --button-secondary-fg: var(--color-primary);
  --button-secondary-border: var(--color-primary);
  --button-secondary-hover-bg: var(--color-surface);
  --button-inverse-bg: var(--color-inverse-foreground);
  --button-inverse-fg: var(--color-foreground);
  --button-inverse-hover-bg: var(--color-surface);
  --link-color: var(--color-primary);
  --link-hover-color: var(--color-primary-hover);
  --link-inverse-color: var(--color-inverse-foreground);
  --link-underline-offset: 0.18em;
  --link-underline-thickness: 0.08em;
  --row-border: var(--color-border);
  --row-padding-y: var(--spacing-component);
  --row-inverse-border: var(--color-inverse-border);
  --row-total-rule: var(--color-foreground);
  --row-total-rule-width: var(--border-rule);
  --figure-radius: var(--radius-media);
  --figure-caption-color: var(--color-muted-foreground);
  --figure-caption-size: var(--font-size-caption);
  --figure-ratio-landscape: var(--layout-ratio-landscape);
  --figure-ratio-portrait: var(--layout-ratio-portrait);
  --bar-bg: var(--color-background);
  --bar-border: var(--color-border-strong);
  --bar-padding: var(--spacing-component-sm);
  --demo-bg: var(--color-surface);
  --demo-fg: var(--color-foreground);
  --demo-size: var(--font-size-caption);
  --step-rule: var(--color-foreground);
  --step-rule-width: var(--border-rule);
  --proof-rule: var(--color-foreground);
  --proof-rule-width: var(--border-rule);
  --contact-phone-size: var(--font-size-display);
  --contact-phone-rule-width: var(--border-rule);
}