/* ==========================================================================
   Fedenko — design tokens
   Implementation source of truth. Every page, component and utility takes
   colour, type, spacing, radius, shadow and motion from here; no literal hex
   belongs anywhere else.

   Derived from `.design/Fedenko - Standalone.html` (client-approved,
   13.08.2026), unpacked by `python .design/extract-bundle.py` into
   `.design/extracted/tokens.css`. Eleven values differ from the bundle: each
   is an accessibility correction, numbered D1–D11 and explained with measured
   ratios in `.design/DESIGN_AUDIT.md`. Where this file and the bundle
   disagree, this file wins.

   Nothing here may change without a client decision plus
   `python .design/verify-tokens.py` printing `RESULT: ALL PASS`.
   ========================================================================== */

:root {
  /* --- base: blue ramp (primary visual surface) ------------------------- */
  --blue-700: #0F3D68;
  --blue-600: #17568F;
  --blue-500: #1E6FB8;
  --sky-400: #60A0D0;
  --sky-300: #A6C9E6;
  --sky-200: #DBEAF7;
  --sky-100: #EFF6FC;

  /* --- base: navy (dosed) ---------------------------------------------- */
  --navy-900: #10233A;
  --navy-700: #1E3A57;

  /* --- base: swiss red (CTA only) --------------------------------------- */
  --red-600: #E11D1D;
  --red-700: #B91818;

  /* --- base: accent purple (icon badges) --------------------------------- */
  --purple-500: #7C5CCC;

  /* --- base: neutrals / cool surfaces ----------------------------------- */
  --white: #FFFFFF;
  --cool-50: #F5F9FC;
  --cool-100: #E9F1F7;
  --cool-200: #D3E1EC;
  --slate-600: #47586A;
  --slate-500: #515D69;            /* D3 — bundle #6B7B8A */

  /* --- base: status ------------------------------------------------------ */
  --green-600: #197D46;            /* D7 — bundle #1F9D57 */
  --amber-600: #976214;            /* D8 — bundle #C9821A */
  --danger-600: #C42A2A;

  /* --- utility ----------------------------------------------------------- */
  --star-gold: #ffc107;

  /* --- semantic: text ---------------------------------------------------- */
  --text-primary: var(--navy-900);
  --text-body: var(--slate-600);
  --text-muted: var(--slate-500);
  --text-on-blue: #FFFFFF;
  --text-on-dark: var(--sky-100);  /* D2 — body copy on the blue grounds. The
                                      bundle used --sky-200; moving one step
                                      lighter is what let the blue itself get
                                      brighter (client decision, 14.08.2026)
                                      while white and body copy both keep
                                      4.5:1 on the worst stop. */
  --text-on-red: #FFFFFF;
  --text-link: var(--blue-600);          /* D4 — bundle var(--blue-500) */
  --text-link-hover: var(--blue-700);    /* D4 — bundle var(--blue-600) */

  /* --- semantic: surfaces ------------------------------------------------ */
  --surface-page: var(--white);
  --surface-raised: var(--white);
  --surface-cool: var(--cool-50);
  --surface-cool-strong: var(--cool-100);
  --surface-wash: var(--sky-100);
  --surface-band: var(--sky-200);
  --surface-blue: var(--blue-500);
  --surface-navy: var(--navy-900);

  /* --- gradients ---------------------------------------------------------
     Nothing large is a flat colour; every fill shifts one or two steps of its
     own ramp. A gradient is measured against its worst (lightest) stop, so the
     top stops of the dark fills carry the corrections. */
  --grad-wash: linear-gradient(165deg, #F2F8FD 0%, #E6F0FA 55%, #DAEAF7 100%);
  --grad-band: linear-gradient(165deg, #E2EFF9 0%, #CFE3F5 60%, #BAD7EF 100%);
  --grad-band-strong: linear-gradient(165deg, #CFE3F5 0%, #BDD8EE 100%);
                                   /* D10 — bundle bottom stop #AECFEA */
  --grad-cool: linear-gradient(165deg, var(--white) 0%, var(--cool-50) 100%);
  --grad-hero: linear-gradient(168deg, #DCEBF8 0%, #C3DDF2 45%, #A8CDEA 100%);
  --grad-deep: linear-gradient(150deg, #2674B5 0%, var(--blue-500) 52%, #1A5F9E 100%);
                                   /* D1 — bundle top stop #2A7FC7 */
  --grad-deep-soft: linear-gradient(to bottom right, #2670B0 0%, #3D8CCB 55%, #75B8E4 100%);
                                   /* D2 — client-approved reverse ramp: dark top-left copy origin → bright bottom-right photo side. */
  --grad-blue: linear-gradient(180deg, #287ABF 0%, var(--blue-500) 55%, #1A63A6 100%);
                                   /* D6 — bundle top stop #2A7FC7 */
  --grad-blue-hover: linear-gradient(180deg, var(--blue-500) 0%, var(--blue-600) 60%, #134B7E 100%);
  --grad-red: linear-gradient(180deg, #E52020 0%, var(--red-600) 55%, #CC1A1A 100%);
                                   /* D5 — bundle top stop #EE3535 */
  --grad-red-hover: linear-gradient(180deg, var(--red-600) 0%, var(--red-700) 60%, #A31414 100%);

  /* --- semantic: borders -------------------------------------------------- */
  --border-cool: var(--cool-200);
  --border-sky: var(--sky-300);
  --border-strong: var(--sky-400);
  --border-focus: var(--blue-500);
  --border-control: #6A9ABF;

  /* --- semantic: actions -------------------------------------------------- */
  --action-primary: var(--red-600);
  --action-primary-hover: var(--red-700);
  --action-secondary: var(--blue-500);
  --action-secondary-hover: var(--blue-600);
  --action-ghost-border: var(--sky-300);
  --action-ghost-text: var(--blue-600);  /* D11 — bundle var(--blue-500) */

  /* --- semantic: accents --------------------------------------------------- */
  --accent-icon: var(--sky-400);
  --accent-chip-bg: var(--sky-200);
  --accent-chip-text: var(--blue-700);

  /* --- semantic: status ---------------------------------------------------- */
  --status-ok: var(--green-600);
  --status-warn: var(--amber-600);
  --status-danger: var(--danger-600);

  /* --- semantic: focus ring ------------------------------------------------ */
  --focus-ring: 0 0 0 3px rgba(30, 111, 184, .35);
}

/* --- type ------------------------------------------------------------------
   Inter is self-hosted; only the `latin` and `latin-ext` subsets are shipped —
   de-CH and en-CH need nothing else. The @font-face rules live in main.css. */
:root {
  --font-core: "Inter", "Helvetica Neue", Helvetica, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --fs-h1: 58px;
  --fs-h1-mobile: 40px;
  --fs-h2: 34px;
  --fs-h2-mobile: 27px;
  --fs-h3: 24px;
  --fs-lead: 19px;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-label: 13px;

  --lh-h1: 1.06;
  --lh-h2: 1.14;
  --lh-h3: 1.28;
  --lh-lead: 1.55;
  --lh-body: 1.62;
  --lh-small: 1.55;
  --lh-label: 1.2;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --ls-h1: -0.02em;
  --ls-h2: -0.018em;
  --ls-h3: -0.012em;
  --ls-body: 0;
  --ls-label: 0.06em;
}

/* --- space and layout ------------------------------------------------------ */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 88px;
  --space-10: 120px;

  --section-y: 96px;
  --section-y-mobile: 56px;

  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: 24px;
  --gutter-mobile: 20px;

  --header-h: 72px;
  --header-h-mobile: 64px;
  --touch-min: 44px;

  --section-min: 640px;
}

/* --- shape ------------------------------------------------------------------ */
:root {
  --radius-control: 6px;
  --radius-badge: 10px;
  --radius-card: 14px;
  --radius-shell: 22px;
  --radius-pill: 999px;

  --border-w: 1px;
  --border-w-strong: 2px;

  --shadow-xs: 0 1px 2px rgba(16, 35, 58, .05);
  --shadow-sm: 0 2px 6px rgba(16, 35, 58, .06);
  --shadow-card: 0 4px 14px rgba(16, 35, 58, .07);
  --shadow-lift: 0 10px 24px rgba(16, 35, 58, .10);
  --shadow-header: 0 1px 0 rgba(211, 225, 236, 1);

  /* --- glass --------------------------------------------------------------- */
  --glass-bg: color-mix(in srgb, var(--sky-100) 62%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--sky-200) 74%, transparent);
  --glass-line: color-mix(in srgb, var(--white) 70%, transparent);
  --glass-blur: 14px;
  --glass-blur-sm: 10px;
}

/* --- motion ------------------------------------------------------------------ */
:root {
  --dur-fast: 140ms;
  --dur-base: 180ms;
  --dur-slow: 220ms;
  --dur-hero: 620ms;

  --ease-standard: cubic-bezier(.2, .6, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  --transition-ui: all var(--dur-base) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-hero: 1ms;
  }
}

/* --- base elements ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-core);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  color: var(--text-primary);
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--fw-extrabold);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-bold);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-semibold);
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--text-link);
  text-decoration: none;
}

a:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* D9 — the bundle relies on the UA focus ring in places; make it explicit and
   never remove it. Measured for WCAG 1.4.11 against the worst light ground. */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-control);
}

button {
  font-family: inherit;
}

@media (max-width: 820px) {
  h1 {
    font-size: var(--fs-h1-mobile);
    overflow-wrap: break-word;
    hyphens: auto;
  }

  h2 {
    font-size: var(--fs-h2-mobile);
  }
}