/* 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 — Sofia Pro, the typeface used in the logo.
   Self-hosted from assets/fonts/ (.woff). One family, real weight axis:
   100 UltraLight · 200 ExtraLight · 300 Light · 400 Regular · 500 Medium
   600 SemiBold · 700 Bold · 900 Black — plus a matching italic for each.
   Sofia Pro has no 800; a request for 800 resolves to 900 Black.

   LICENCE: the files supplied were webfont conversions. Confirm Tradius holds a
   webfont/self-hosting licence from Mostardesign before the site goes live. */
@font-face{font-family:"Sofia Pro";src:url("./fonts/SofiaPro-UltraLight.woff") format("woff");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"Sofia Pro";src:url("./fonts/SofiaPro-UltraLightItalic.woff") format("woff");font-weight:100;font-style:italic;font-display:swap}
@font-face{font-family:"Sofia Pro";src:url("./fonts/SofiaPro-ExtraLight.woff") format("woff");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Sofia Pro";src:url("./fonts/SofiaPro-ExtraLightItalic.woff") format("woff");font-weight:200;font-style:italic;font-display:swap}
@font-face{font-family:"Sofia Pro";src:url("./fonts/SofiaPro-Light.woff") format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Sofia Pro";src:url("./fonts/SofiaPro-LightItalic.woff") format("woff");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Sofia Pro";src:url("./fonts/SofiaPro-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Sofia Pro";src:url("./fonts/SofiaPro-Italic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Sofia Pro";src:url("./fonts/SofiaPro-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Sofia Pro";src:url("./fonts/SofiaPro-MediumItalic.woff") format("woff");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Sofia Pro";src:url("./fonts/SofiaPro-SemiBold.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Sofia Pro";src:url("./fonts/SofiaPro-SemiBoldItalic.woff") format("woff");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Sofia Pro";src:url("./fonts/SofiaPro-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Sofia Pro";src:url("./fonts/SofiaPro-BoldItalic.woff") format("woff");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Sofia Pro";src:url("./fonts/SofiaPro-Black.woff") format("woff");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Sofia Pro";src:url("./fonts/SofiaPro-BlackItalic.woff") format("woff");font-weight:900;font-style:italic;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{
  /* "Sofia Pro" is the brand face, self-hosted — see tokens/fonts.css. */
  --font-sans:"Sofia Pro",-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;

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-black:900; /* Sofia Pro Black — the family has no 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:#FF8534;
  --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}}