/*
 * One design scale for the whole of digiratkaisut.fi.
 *
 * css/styles.css reads these values and declares none of its own. Colour
 * names say what a colour is for, not what it looks like, so a brand change
 * is one edit here and never a rename elsewhere.
 */
:root {
  /* Colour roles */
  --page: #f4f7fa;
  --page-background: linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
  --surface: #ffffff;
  --surface-soft: #f8fbfe;
  --surface-tint: #f3f8fc;
  --text: #1f2937;
  --text-rgb: 31 41 55;
  --text-muted: #5b6472;
  --heading: #0f2f4f;
  --border: #d9e4ef;
  --brand: #00508c;
  --brand-rgb: 0 80 140;
  --brand-strong: #083b69;
  --brand-soft: #eaf2f8;
  --inverse-surface: #083b69;
  --inverse-surface-rgb: 8 59 105;
  --inverse-text: #ffffff;
  --inverse-text-muted: rgb(255 255 255 / 0.82);
  --focus-ring: rgb(0 80 140 / 0.34);
  --danger-bg: #fff4f4;
  --danger-border: #e7b4b4;
  --danger-text: #8a1f1f;
  --success-bg: #eef9f1;
  --success-border: #b9e2c3;
  --success-text: #166534;

  /* Typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --heading-1: clamp(2.125rem, 1.35rem + 2.6vw, 3rem);
  --heading-2: clamp(1.75rem, 1.3rem + 1.4vw, 2.125rem);
  --heading-3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --display: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  --leading-tight: 1.15;
  --leading-body: 1.65;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Shape and depth */
  --radius-sm: 8px;
  --radius-control: 12px;
  --radius-md: 16px;
  --radius: 20px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow: 0 12px 32px rgb(0 50 90 / 0.08);
  --shadow-soft: 0 8px 24px rgb(0 50 90 / 0.06);
  --shadow-raised: 0 14px 34px rgb(0 50 90 / 0.18);

  /* Layout */
  --max: 1120px;
}