/* Tradius Global — design tokens, round 9.
   Overgenomen uit het design system (_ds/tradius-global-design-system-4ce8fb…).
   Kleuren en type zijn hier de bron; site.css bouwt er de componenten op. */

/* Tradius Global type — tijdelijk Outfit (Google Fonts, SIL Open Font License 1.1),
   zelf gehost als één variabele woff2 (44 KB, gewichten 100–900).

   De merkletter is Sofia Pro, de letter van het logo. Die staat hier NIET meer
   zolang niet vaststaat dat Tradius een webfont-/self-hostinglicentie van
   Mostardesign heeft (open punt A1). Terugzetten = de zestien SofiaPro-*.woff
   uit design/round-9/assets/fonts terugplaatsen, de @font-face-regels van
   ronde 9 hier terug en --font-sans hieronder omzetten. Sofia Pro heeft geen 800;
   Outfit wel — dat maakt voor de site niet uit, 800 wordt nergens gevraagd. */
@font-face{font-family:"Outfit";src:url("./fonts/Outfit-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* ---- Brand core ----
     Concept v2 named four colours; the designer has since revised the working
     orange and blue (2026-08, not final). The logo SVGs still carry the concept's
     original gradient stops — see --gradient-brand-logo. */
  --tg-midnight-sky:#040348;   /* Midnight Sky  — ground colour, all body text */
  --tg-network-blue:#3173AC;   /* Blue (working) — functional / interactive */
  --tg-ambition-orange:#FE6C06;/* Oranje (working) — accent, energy, CTA */
  --tg-dutch-born:#FF9B00;     /* Dutch Born    — highlight, gradient end stop */

  /* Superseded concept values, kept for reference and for the logo gradient */
  --tg-network-blue-concept:#2D3887;
  --tg-ambition-orange-concept:#E15725;

  /* ---- Blue scale (Midnight Sky through the working blue) ---- */
  --blue-950:#040348;
  --blue-900:#0A2540;
  --blue-800:#14456B;
  --blue-700:#1F5C8C;
  --blue-600:#3173AC;
  --blue-500:#4C8CC0;
  --blue-400:#6FA5D0;
  --blue-300:#98C0E0;
  --blue-200:#C2DAEC;
  --blue-100:#E0EDF6;
  --blue-50:#F1F7FB;

  /* ---- Warm scale (working orange into Dutch Born) ---- */
  --orange-700:#B44700;
  --orange-600:#DA5A02;
  --orange-500:#FE6C06;
  --orange-400:#FF8534;
  --orange-300:#FFA76B;
  --orange-200:#FFCBA5;
  --orange-100:#FFE8D6;
  --amber-500:#FF9B00;
  --amber-400:#FFB13B;
  --amber-200:#FFE0AC;
  --amber-100:#FFF2DC;

  /* ---- Gradient tints — mid-gradient colours pulled out as flat swatches,
     for the combinations the designer asked us to try ---- */
  --tint-indigo:#2D3887;
  --tint-cobalt:#3B57A8;
  --tint-steel:#4E6FA8;
  --tint-rust:#E15725;
  --tint-ember:#F07A2A;

  /* ---- Neutrals (cool, tinted toward Midnight Sky) ---- */
  --neutral-0:#FFFFFF;
  --neutral-25:#F7F8FC;
  --neutral-50:#F2F3F9;
  --neutral-100:#EAECF4;
  --neutral-200:#DCDFEC;
  --neutral-300:#C4C9DD;
  --neutral-400:#9AA0BC;
  --neutral-500:#6E7594;
  --neutral-600:#4E5474;
  --neutral-700:#343A5C;
  --neutral-800:#1E2444;
  --neutral-900:#0D1130;

  /* ---- Semantic status ---- */
  --success-500:#2E9E6B;
  --success-100:#E2F5EB;
  --warning-500:#FF9B00;
  --warning-100:#FFF2DC;
  --danger-500:#C0224A;
  --danger-100:#FBE9EE;
  --info-500:#3173AC;
  --info-100:#E3E6F8;

  /* ---- Brand gradient (exact logo stops) ---- */
  --gradient-brand-logo: linear-gradient(120deg,#040348 0%,#2D3887 25%,#E15725 75%,#FF9B00 100%); /* @kind color */
  --gradient-brand: linear-gradient(120deg,#040348 0%,#3173AC 28%,#FE6C06 78%,#FF9B00 100%); /* @kind color */
  --gradient-brand-soft: linear-gradient(120deg,#040348 0%,#3173AC 55%,#FE6C06 100%); /* @kind color */
  --gradient-hero-wash: radial-gradient(50% 60% at 18% 40%,rgba(49,115,172,.18) 0%,transparent 60%),radial-gradient(46% 56% at 82% 26%,rgba(254,108,6,.14) 0%,transparent 62%); /* @kind color */
  --gradient-photo-shade: linear-gradient(178deg,rgba(20,69,107,.42) 0%,rgba(4,3,72,.74) 44%,rgba(4,3,72,.92) 74%,rgba(4,3,72,.95) 100%); /* @kind color */
}
:root{
  /* Outfit tot de Sofia Pro-licentie rond is — zie het @font-face-blok bovenaan. */
  --font-sans:"Outfit",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-body:var(--font-sans);
  --font-display:var(--font-sans);
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* **De getallen hieronder zijn voor Outfit, niet voor Sofia Pro.**
     Outfit is bij hetzelfde gewichtsgetal fors zwaarder: op 900 zette de kop 23%
     meer inkt neer dan Sofia Pro Black. Nagemeten per tekstsoort (navigatie,
     lopende tekst, knoppen, statistiekstrook) en teruggebracht tot het gewicht
     waarop de inktdichtheid gelijk is aan productie — binnen 1% voor navigatie
     en knoppen, 4% voor de rest. Die laatste 4% is de bodem: Outfit heeft een
     5,5% grotere x-hoogte dan Sofia Pro en oogt daardoor bij gelijk korps iets
     forser. Dat is niet weg te regelen zonder de letter te schalen.

     Outfit is een variabel font, dus tussenwaarden als 690 bestaan echt.
     Zet bij terugkeer naar Sofia Pro de oorspronkelijke waarden terug:
     300/400/500/600/700/900. */
  --weight-light:300;
  --weight-regular:400;
  --weight-medium:470;   /* Sofia Pro: 500 */
  --weight-semibold:560; /* Sofia Pro: 600 */
  --weight-bold:620;     /* Sofia Pro: 700 */
  --weight-black:690;    /* Sofia Pro: 900 (Black; die familie heeft geen 800) */

  /* Fluid display sizes — h1/h2 track the marketing site */
  --text-display-1:clamp(31px,3.6vw,47px);
  --text-display-2:clamp(27px,3.4vw,44px);
  --text-heading-1:clamp(25px,2.9vw,37px);
  --text-heading-2:26px;
  --text-heading-3:24px;
  --text-heading-4:20px;
  --text-title:18.5px;
  --text-lede:17.5px;
  --text-body:16.5px;
  --text-body-sm:15px;
  --text-label:14.5px;
  --text-caption:13.5px;
  --text-micro:12.5px;
  --text-eyebrow:11px;

  --leading-tight:1.08;
  --leading-heading:1.16;
  --leading-snug:1.3;
  --leading-body:1.62;

  --tracking-display:-.016em;
  --tracking-heading:-.012em;
  --tracking-normal:0;
  --tracking-wide:.02em;
  --tracking-eyebrow:.2em;
}
:root{
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;
  --space-9:48px; --space-10:56px; --space-11:64px; --space-12:88px;
  --space-13:104px;

  --section-y:88px;          /* standard section rhythm */
  --section-y-tight:62px;    /* < 640px */
  --section-y-loose:96px;    /* closing / statement bands */
  --container-max:1220px;
  --container-pad:34px;
  --container-pad-sm:20px;
  --header-height:74px;
  --measure-lede:62ch;
  --measure-body:52ch;
  --measure-heading:22ch;
  --grid-gap:52px;
  --card-gap:20px;
}
:root{
  --radius-xs:5px;
  --radius-sm:8px;
  --radius-button:9px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:18px;
  --radius-2xl:22px;
  --radius-pill:999px;
  --border-hairline:1px;
  --border-regular:1.5px;
  --border-strong:2.5px;
}
:root{
  --shadow-1:0 10px 30px rgba(4,3,72,.08);
  --shadow-2:0 24px 52px rgba(4,3,72,.18);
  --shadow-cta:0 12px 26px rgba(4,3,72,.26);
  --shadow-modal:0 30px 80px rgba(4,3,72,.40);
  --ring-focus:0 0 0 3px rgba(49,115,172,.30);
  --blur-glass: blur(12px); /* @kind other */
  --blur-scrim: blur(3px); /* @kind other */
}
:root{
  --ease-out-soft: cubic-bezier(.2,.7,.3,1); /* @kind other */
  --ease-out-rail: cubic-bezier(.3,.7,.3,1); /* @kind other */
  --dur-fast: .18s; /* @kind other */
  --dur-base: .25s; /* @kind other */
  --dur-slow: .45s; /* @kind other */
  --dur-reveal: .75s; /* @kind other */
  --lift-hover: -1px; /* @kind other */
  --lift-card: -5px; /* @kind other */
}
:root{
  /* surfaces */
  --surface-page:var(--neutral-50);
  --surface-page-alt:var(--neutral-100);
  --surface-card:var(--neutral-0);
  --surface-inverse:var(--tg-midnight-sky);
  --surface-inverse-panel:#0B0A5C;
  --surface-inverse-raised:#141457;
  --surface-accent-soft:var(--blue-100);
  --surface-warm-soft:var(--orange-100);
  --surface-scrim:rgba(4,3,72,.62);

  /* text */
  --text-strong:var(--tg-midnight-sky);
  --text-body-color:var(--neutral-700);
  --text-muted:var(--neutral-500);
  --text-on-inverse:var(--neutral-0);
  --text-on-inverse-soft:#B9BEDE;
  --text-accent:var(--blue-700);
  --text-accent-warm:var(--orange-700);
  --text-accent-warm-on-dark:var(--amber-400);
  --text-link:var(--blue-700);
  --text-link-hover:var(--tg-midnight-sky);

  /* lines */
  --border-subtle:var(--neutral-200);
  --border-default:var(--neutral-300);
  --border-inverse:#1E2A63;
  --border-focus:var(--blue-700);

  /* interactive */
  --action-primary-bg:var(--tg-ambition-orange);
  --action-primary-bg-hover:#D45400;   /* donkerder bij hover: lichter maakte het contrast slechter */
  --action-primary-fg:var(--neutral-0);
  --action-secondary-border:var(--tg-midnight-sky);
  --action-secondary-fg:var(--tg-midnight-sky);
  --action-secondary-bg-hover:var(--tg-midnight-sky);
  --action-quiet-bg:var(--blue-100);
  --action-quiet-fg:var(--blue-700);
  --action-disabled-bg:var(--neutral-200);
  --action-disabled-fg:var(--neutral-400);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);background:var(--surface-page);color:var(--text-strong);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--text-link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--text-link-hover)}
button{font:inherit;color:inherit}
::selection{background:var(--blue-100);color:var(--tg-midnight-sky)}
h1,h2,h3,h4{font-weight:var(--weight-black);letter-spacing:var(--tracking-heading);line-height:var(--leading-heading)}
h1{font-size:var(--text-display-1);line-height:var(--leading-tight);letter-spacing:var(--tracking-display)}
h2{font-size:var(--text-heading-1)}
h3{font-size:var(--text-heading-3)}
h4{font-size:var(--text-heading-4);font-weight:var(--weight-bold)}
:focus-visible{outline:3px solid var(--border-focus);outline-offset:2px;border-radius:var(--radius-xs)}
.tg-invert :focus-visible{outline-color:var(--blue-300)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}