/*
 * Design tokens — Hitsi-Äijät redesign
 * Source of truth: Hitsi-Aijat_Redesign_Package.docx, section 02 (UI Kit).
 * Pixel values from the brief are expressed in rem (1rem = 16px) so type
 * and spacing respect the user's font-size preference; touch targets and
 * hairline borders stay in px because they are physical measurements.
 * No selectors here besides :root and the reduced-motion override.
 */

:root {
  /* Color — raw palette (DOCX 2.1) */
  --color-industrial-900: #151515;
  --color-text-900: #242424;
  --color-surface-000: #FFFFFF;
  --color-canvas-050: #F5F5F3;
  --color-muted-600: #686868;
  --color-border-200: #DADADA;
  /* Deliberate accessibility deviation from the brief's decorative
     #DADADA border (1.40:1 on white — below the 3:1 WCAG 2.2 non-text
     target). Used only for interactive field boundaries, not cards or
     decorative dividers, which keep --color-border-200 as specified. */
  --color-border-control: #858585;
  /* Retired as the site's accent color (TASK UI-2): every visible
     component that used to reference --color-accent/--color-accent-hover
     has been repointed to the brand-blue tokens below. Kept defined,
     unused, as raw palette values only — not wired into any semantic
     alias or component rule — per explicit owner decision, in case a
     genuinely safety/hazard-specific need (not a general accent) comes up
     later. */
  --color-safety-500: #FFC400;
  --color-safety-600: #E5AF00;
  --color-success-600: #287A45;
  --color-danger-600: #B3261E;
  --color-info-600: #235C84;
  /* Sampled from the logo mark's own ink (canvas pixel-average over 7883
     opaque blue-dominant pixels of the live header logo asset), not an
     invented value. Originally scoped to the mobile nav-toggle button
     only; TASK UI-1 extended it to 8 primary CTAs, and TASK UI-2 (owner-
     approved) completed the migration — this is now the site's one
     general-purpose accent, used for interactive (buttons, links, active
     states) and decorative (borders, badges, step markers) accents alike.
     --color-brand-blue-700 is one step darker, for hover/pressed states —
     the same relationship --color-safety-600 had to --color-safety-500. */
  --color-brand-blue-600: #033DA7;
  --color-brand-blue-700: #022C7A;

  /* Color — semantic aliases used by components */
  --color-bg-page: var(--color-canvas-050);
  --color-bg-surface: var(--color-surface-000);
  --color-bg-dark: var(--color-industrial-900);
  --color-text-default: var(--color-text-900);
  --color-text-on-dark: var(--color-surface-000);
  --color-text-muted: var(--color-muted-600);
  --color-border-default: var(--color-border-200);
  --color-border-active: var(--color-industrial-900);
  /* Accessible replacement for the old accent-yellow focus outline on
     dark/photo backgrounds (.section--dark and equivalents): white was
     chosen over a light-blue tint because it clears WCAG 2.2's 3:1
     non-text contrast target on every dark surface in this theme by the
     widest possible margin (~18:1 against --color-industrial-900), with
     no dependency on which exact dark shade or photo it sits over. */
  --color-focus-on-dark: var(--color-surface-000);
  --color-success: var(--color-success-600);
  --color-danger: var(--color-danger-600);
  --color-info: var(--color-info-600);

  /* Typography — families (DOCX 2.2) */
  --font-display: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Inter', Arial, sans-serif;

  /* Typography — scale (desktop values; base.css supplies mobile-first overrides) */
  --text-h1-size: 3.75rem;      /* 60px, within the 56–64px brief range */
  --text-h1-size-mobile: 2.5rem; /* 40px, within the 38–44px brief range */
  --text-h1-weight: 600;
  --text-h1-line-height: 1.02;

  --text-h2-size: 2.5rem;       /* 40px, within 38–44px */
  --text-h2-size-mobile: 2rem;   /* 32px, within 30–34px */
  --text-h2-weight: 600;
  --text-h2-line-height: 1.10;

  --text-h3-size: 1.75rem;      /* 28px, within 26–30px */
  --text-h3-size-mobile: 1.5rem; /* 24px, within 23–26px */
  --text-h3-weight: 600;
  --text-h3-line-height: 1.15;

  --text-body-l-size: 1.125rem;      /* 18px desktop */
  --text-body-l-size-mobile: 1.0625rem; /* 17px mobile */
  --text-body-l-line-height: 1.60;

  --text-body-size: 1rem;       /* 16px, same on mobile and desktop */
  --text-body-line-height: 1.55;

  --text-small-size: 0.875rem;  /* 14px */
  --text-small-line-height: 1.45;

  --text-button-size: 1rem;     /* 16px, upper end of the 15–16px range for legibility */
  --text-button-weight: 600;
  --text-button-line-height: 1.20;

  --text-overline-size: 0.75rem; /* 12px */
  --text-overline-weight: 700;
  --text-overline-line-height: 1.20;
  --text-overline-tracking: 0.08em;

  --text-reading-max-chars: 72ch;

  /* Spacing scale (DOCX 2.3) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;      /* 64px, section spacing mobile/tablet */
  --space-9: 6rem;      /* 96px, section spacing desktop */

  /* Containers (DOCX 2.3) */
  --container-max: 80rem;        /* 1280px */
  --container-padding-mobile: 1rem;   /* 16px, safe default below the 24px breakpoint */
  --container-padding-desktop: 2rem;  /* 32px */
  --container-reading-max: 47.5rem;   /* 760px */

  /* Radius (DOCX 2.4) */
  --radius-control: 0.25rem; /* 4px — buttons, fields */
  --radius-card: 0.375rem;   /* 6px */
  --radius-overlay: 0.5rem;  /* 8px — drawer/modal */

  /* Borders (DOCX 2.4) */
  --border-width-default: 1px;
  --border-width-active: 2px;

  /* Shadow (DOCX 2.4) */
  --shadow-card-hover: 0 10px 28px rgba(21, 21, 21, .10);
  --shadow-header-sticky: 0 6px 24px rgba(21, 21, 21, .08);

  /* Touch target (DOCX 5.2) */
  --touch-target-min: 44px;
  --control-height-medium: 48px;
  --control-height-large: 56px;

  /* Z-index scale (DOCX 4.5) */
  --z-base: 0;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-drawer: 400;
  --z-toast: 500;

  /* Motion (DOCX 4.5) */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --motion-easing: cubic-bezier(.2, .8, .2, 1);
}

/* DOCX 4.5 / 2.9: reduced motion removes duration rather than the transition
   property itself, so components keep their end-state logic intact. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}