/* DGT tokens — from DGT Digital Design System (binding). Web additions at bottom. */

/* ---- fonts.css ---- */
/* Brand typefaces: Roboto (primary) + Montserrat (secondary), per DGT Brand Guidelines 1.1.
   Served from Google Fonts — the brand book supplied no font binaries. Replace with self-hosted
   @font-face + woff2 files in assets/fonts/ if licensing requires it. */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

/* ---- colors.css ---- */
:root{
/* ---- Brand palette. Fixed by DGT Brand Guidelines 1.1. Do not add hues. ---- */
--dgt-navy:#0A355E;
--dgt-blue:#1B76AF;
--dgt-red:#E50000;
--dgt-black:#111111;
--dgt-grey:#C8C8C8;
--dgt-white:#FFFFFF;

/* ---- Tints & shades. Mixes of the brand palette only — no new hues. ---- */
--navy-900:#051D34;
--navy-800:#072744;
--navy-700:#0A355E;
--navy-600:#0D426F;
--navy-500:#14507F;
--navy-300:#5C7F9F;
--navy-100:#C1CEDA;
--navy-050:#EBF0F4;

--blue-700:#12567F;
--blue-500:#1B76AF;
--blue-300:#6BA8CC;
--blue-100:#D1E4EF;

--red-700:#A80000;
--red-500:#E50000;
--red-300:#F26666;
--red-100:#FBD9D9;

--grey-900:#111111;
--grey-700:#3D3D3D;
--grey-500:#767676;
--grey-300:#C8C8C8;
--grey-200:#E2E2E2;
--grey-100:#F1F1F1;
--grey-050:#F8F8F8;

/* ---- Semantic: surface ---- */
--surface-page:var(--dgt-white);
--surface-subtle:var(--grey-050);
--surface-muted:var(--grey-100);
--surface-card:var(--dgt-white);
--surface-inverse:var(--navy-700);
--surface-inverse-deep:var(--navy-900);
--surface-accent:var(--dgt-red);
--surface-tint-navy:var(--navy-050);
--surface-tint-blue:var(--blue-100);
--surface-tint-red:var(--red-100);

/* ---- Semantic: text ---- */
--text-display:var(--navy-700);
--text-heading:var(--navy-700);
--text-body:var(--grey-700);
--text-muted:var(--grey-500);
--text-accent:var(--dgt-red);
--text-link:var(--dgt-blue);
--text-link-hover:var(--navy-700);
--text-on-inverse:var(--dgt-white);
--text-on-inverse-muted:var(--navy-100);
--text-on-accent:var(--dgt-white);

/* ---- Semantic: line ---- */
--line-hairline:var(--grey-200);
--line-strong:var(--navy-700);
--line-accent:var(--dgt-red);
--line-on-inverse:rgba(255,255,255,.22);

/* ---- Semantic: state ---- */
--state-focus:var(--dgt-blue);
--state-disabled-fg:var(--grey-500);
--state-disabled-bg:var(--grey-200);

/* ---- Data visualisation. Ordered series — brand palette only. ---- */
--viz-1:var(--dgt-red);
--viz-2:var(--navy-700);
--viz-3:var(--dgt-blue);
--viz-4:var(--blue-300);
--viz-5:var(--navy-300);
--viz-6:var(--grey-300);
--viz-grid:var(--grey-200);
--viz-axis:var(--grey-500);

/* ---- Imagery treatment ---- */
--img-duotone-shadow:var(--navy-900);
--img-duotone-highlight:var(--grey-100);
--img-scrim:linear-gradient(to top,rgba(5,29,52,.92) 0%,rgba(5,29,52,.55) 45%,rgba(5,29,52,0) 100%); /* @kind color */
--img-scrim-flat:rgba(5,29,52,.62);
}

/* ---- typography.css ---- */
:root{
/* ---- Families ---- */
--font-primary:"Roboto","Helvetica Neue",Arial,sans-serif;   /* display, headings, titles, CTA */
--font-secondary:"Montserrat","Helvetica Neue",Arial,sans-serif; /* subtitles, body */

/* ---- Weights ---- */
--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */
--fw-black:900; /* @kind font */

/* ---- Editorial scale. Ratio ~1.28, tuned for 1440 web / 1920 slide. ---- */
--fs-mega:112px;
--fs-display-1:80px;
--fs-display-2:60px;
--fs-heading-1:44px;
--fs-heading-2:32px;
--fs-title:24px;
--fs-subtitle:19px;
--fs-body-lg:18px;
--fs-body:16px;
--fs-body-sm:14px;
--fs-caption:12px;
--fs-eyebrow:12px;

/* ---- Line heights ---- */
--lh-tight:0.94; /* @kind font */
--lh-display:1.02; /* @kind font */
--lh-heading:1.12; /* @kind font */
--lh-title:1.25; /* @kind font */
--lh-body:1.6; /* @kind font */
--lh-caption:1.4; /* @kind font */

/* ---- Tracking. Big type tightens, small caps opens. ---- */
--ls-mega:-0.035em; /* @kind font */
--ls-display:-0.028em; /* @kind font */
--ls-heading:-0.018em; /* @kind font */
--ls-title:-0.01em; /* @kind font */
--ls-body:0; /* @kind font */
--ls-eyebrow:0.18em; /* @kind font */
--ls-button:0.06em; /* @kind font */

/* ---- Composite roles (per Brand Guidelines type hierarchy) ---- */
--type-display:var(--fw-bold) var(--fs-display-1)/var(--lh-display) var(--font-primary);
--type-heading:var(--fw-semibold) var(--fs-heading-1)/var(--lh-heading) var(--font-primary);
--type-title:var(--fw-semibold) var(--fs-title)/var(--lh-title) var(--font-primary);
--type-subtitle:var(--fw-semibold) var(--fs-subtitle)/var(--lh-title) var(--font-secondary);
--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-secondary);
--type-cta:var(--fw-semibold) var(--fs-body-sm)/1 var(--font-primary);
--type-eyebrow:var(--fw-bold) var(--fs-eyebrow)/1 var(--font-primary);
--measure-body:64ch; /* @kind other */
--measure-lede:48ch; /* @kind other */
}

/* ---- spacing.css ---- */
:root{
/* 4px base, doubling at the top for editorial air */
--space-0:0;
--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:96px;
--space-10:128px;
--space-11:160px;

--gutter:24px;
--section-y:96px;
--section-y-tight:64px;
--page-margin:64px;
--page-margin-sm:24px;
--slide-margin:96px;
--doc-margin:56px;
}

/* ---- layout.css ---- */
:root{
--grid-columns:12; /* @kind other */
--grid-gutter:var(--gutter); /* @kind other */
--content-max:1240px; /* @kind other */
--content-narrow:760px; /* @kind other */
--slide-w:1280px; /* @kind other */
--slide-h:720px; /* @kind other */

--radius-none:0;
--radius-xs:2px;
--radius-sm:4px;
--radius-pill:999px;

--border-hairline:1px; /* @kind other */
--border-strong:2px; /* @kind other */
--rule-accent:4px; /* @kind other */
--rule-heavy:8px; /* @kind other */
}

/* ---- elevation.css ---- */
:root{
/* Shadows are navy-tinted and restrained. Flat + rules first; shadow only for lift off the page. */
--shadow-none:none;
--shadow-1:0 1px 2px rgba(10,53,94,.08);
--shadow-2:0 4px 16px rgba(10,53,94,.10);
--shadow-3:0 16px 48px rgba(10,53,94,.16);
--shadow-focus:0 0 0 3px rgba(27,118,175,.35);
--blur-panel:blur(14px); /* @kind other */
}

/* ---- motion.css ---- */
:root{
--dur-fast:120ms; /* @kind other */
--dur-base:200ms; /* @kind other */
--dur-slow:380ms; /* @kind other */
--dur-reveal:640ms; /* @kind other */
--ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
--ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
--ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
--transition-base:all var(--dur-base) var(--ease-standard); /* @kind other */
}

/* ---- base.css ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{margin:0;color:var(--text-heading);font-family:var(--font-primary)}
h1{font:var(--type-display);letter-spacing:var(--ls-display)}
h2{font:var(--type-heading);letter-spacing:var(--ls-heading)}
h3{font:var(--type-title);letter-spacing:var(--ls-title)}
h4{font:var(--type-subtitle)}
p{margin:0 0 var(--space-4);max-width:var(--measure-body)}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid currentColor;transition:color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
a:hover{color:var(--text-link-hover);border-color:var(--line-accent)}
strong{font-weight:var(--fw-semibold);color:var(--text-heading)}
img{max-width:100%;display:block}
::selection{background:var(--dgt-red);color:#fff}
:focus-visible{outline:2px solid var(--state-focus);outline-offset:2px}
.dgt-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-accent)}
.dgt-rule{height:var(--rule-accent);background:var(--line-accent);border:0;width:64px;margin:0}

/* ---- Web additions (DGT Master Website System) ---- */
:root{
--web-h1:clamp(44px,6.2vw,88px);
--web-h2:clamp(34px,4.4vw,60px);
--web-h3:clamp(22px,1.9vw,28px);
--web-h4:19px;
--web-section-l:clamp(96px,12vw,176px);
--web-section-m:clamp(72px,9vw,128px);
--web-section-s:clamp(48px,6vw,80px);
--web-margin:clamp(20px,5vw,96px);   /* side space: 20 @375 · 64 @1280 · 72 @1440 · 96 @1920+ */
--content-max:1440px;                 /* web master container (overrides brand 1240 for websites) */
--web-nav-h:84px;
--btn-h-lg:56px;--btn-h-md:48px;--btn-h-sm:36px;
}
html{scroll-behavior:smooth}
body{overflow-x:hidden}