/* CTS brand rev2: tokens bundled by build-brand.mjs in this order: fonts, colors, typography, spacing, radius, elevation, motion, base. Edit brand/rev2/tokens/, not this file. */
/* ---- tokens/fonts.css ---- */
/* CTS webfonts — Inter, Latin subset, the four faces the brand system uses and
   nothing else (Font/Inter/README.txt): Regular 400, Medium 500, Semi Bold 600,
   Semi Bold Italic 600. Do not add a fourth weight. Do not synthesize italic. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:italic;font-weight:600;font-display:swap;src:url("assets/fonts/inter-latin-600-italic.woff2") format("woff2")}

/* ---- tokens/colors.css ---- */
/* CTS colours — brand rev 1 (Color Palette.pdf, client re-spec 2026-08-18).
   Two colours are read from the mark, four are derived to serve them. There is
   NO ramp: a weaker tone is the same ink at lower opacity. The old ramp names
   (--navy-700, --orange-500, --grey-100 …) are kept so the site keeps compiling,
   but every step now resolves to one of the six inks or an opacity of it. */
:root{
  /* — The six — */
  --navy:#0B2549;      /* Fleet Navy: the field almost everything sits on */
  --accent:#ED602A;    /* Centerline Orange: marks, never a surface (two exceptions) */
  --cream:#F5F4F2;     /* Utility Cream: light surface, ink over dark */
  --charcoal:#161719;  /* Asphalt Charcoal: text on light when navy is too heavy */
  --steel:#5C6570;     /* Steel Gray: secondary info, light fields only */
  --dock:#D6D1C7;      /* Dock Grey: photo placeholder rectangle only */

  /* — The practised opacity steps — */
  --navy-70:rgba(11,37,73,.70);
  --navy-55:rgba(11,37,73,.55);
  --navy-25:rgba(11,37,73,.25);
  --navy-12:rgba(11,37,73,.12);
  --navy-06:rgba(11,37,73,.06);
  --cream-80:rgba(245,244,242,.80);
  --cream-75:rgba(245,244,242,.75);
  --cream-55:rgba(245,244,242,.55);
  --cream-25:rgba(245,244,242,.25);
  --cream-12:rgba(245,244,242,.12);
  --accent-12:rgba(237,96,42,.12);
  --accent-06:rgba(237,96,42,.06);

  /* — Legacy ramp names → rev-1 inks — */
  --navy-950:var(--charcoal);
  --navy-900:var(--navy);
  --navy-800:var(--navy);
  --navy-700:var(--navy); /* BRAND NAVY */
  --navy-600:var(--navy);
  --navy-500:var(--navy-70);
  --navy-400:var(--navy-55);
  --navy-300:var(--cream-55);
  --navy-200:var(--cream-75);
  --navy-100:var(--navy-12);
  --navy-050:var(--navy-06);

  --orange-900:var(--accent);
  --orange-800:var(--accent);
  --orange-700:var(--accent);
  --orange-600:var(--accent);
  --orange-500:var(--accent); /* BRAND ORANGE */
  --orange-400:var(--accent);
  --orange-300:var(--accent);
  --orange-200:var(--accent-12);
  --orange-100:var(--accent-06);
  --orange-050:var(--accent-06);

  --white:var(--cream); /* never pure white */
  --grey-050:var(--cream);
  --grey-100:var(--cream); /* was panel grey; the light surface is cream now */
  --grey-200:var(--navy-12);
  --grey-300:var(--navy-25);
  --grey-400:var(--steel);
  --grey-500:var(--steel);
  --grey-600:var(--steel);
  --grey-700:var(--charcoal);
  --grey-800:var(--charcoal);
  --grey-900:var(--charcoal);

  /* — Semantic status (not in the package; forms still need them) — */
  --green-600:#15694A;
  --green-500:#1E8A5F;
  --green-100:#DFF1E9;
  --amber-600:#96650B;
  --amber-500:#C08512;
  --amber-100:#FBEED2;
  --red-600:#96231C;
  --red-500:#B92E24;
  --red-100:#FADCDA;
  --blue-600:var(--navy);
  --blue-100:var(--navy-12);

  /* — Semantic aliases — */
  --text-strong:var(--navy);
  --text-body:var(--charcoal);
  --text-muted:var(--steel);
  --text-faint:var(--navy-55);
  --text-inverse:var(--cream);
  --text-accent:var(--accent);   /* labels, figures, eyebrows — never body copy (3.1:1 on cream) */
  --text-link:var(--navy);
  --text-link-hover:var(--accent);

  --surface-page:var(--cream);
  --surface-subtle:var(--cream);
  --surface-card:var(--cream);
  --surface-sunken:var(--cream);
  --surface-inverse:var(--navy);
  --surface-inverse-2:var(--navy);
  --surface-accent:var(--accent);
  --surface-accent-soft:var(--accent-06);
  --surface-placeholder:var(--dock);

  --border-subtle:var(--navy-12);
  --border-default:var(--navy-25);
  --border-strong:var(--navy);
  --border-accent:var(--accent);
  --border-inverse:var(--cream-25);

  --focus-ring:var(--accent);
  --overlay-scrim:rgba(11,37,73,.90);

  --status-ok-fg:var(--green-600);
  --status-ok-bg:var(--green-100);
  --status-warn-fg:var(--amber-600);
  --status-warn-bg:var(--amber-100);
  --status-danger-fg:var(--red-600);
  --status-danger-bg:var(--red-100);
  --status-info-fg:var(--navy);
  --status-info-bg:var(--navy-12);
  --status-neutral-fg:var(--charcoal);
  --status-neutral-bg:var(--navy-12);
}

/* ---- tokens/typography.css ---- */
/* CTS type — brand rev 1 (Typography Guide.pdf). One family, three weights.
   Hierarchy comes from size and space, never a fourth weight or a second family.
   Sentence case for headline and support; caps only in label, stamp, bar and chip.
   Italic is reserved for the logotype and the headline highlight (.hl).
   Guide sizes are on a 1080px canvas; the web ramp is that scale × ~0.37 with a
   16px body floor. */
:root{
  --font-display:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; /* numerals: use tabular-nums, not a mono face */

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:600; /* there is no 700 in the system */

  /* Display — Semi Bold, sentence case, tight */
  --display-1-size:clamp(40px,6vw,56px); --display-1-lh:1.02; /* @kind other */ --display-1-ls:-0.015em; /* @kind other */
  --display-2-size:clamp(34px,4.6vw,44px); --display-2-lh:1.05; /* @kind other */ --display-2-ls:-0.012em; /* @kind other */
  --display-3-size:clamp(28px,3.6vw,36px); --display-3-lh:1.08; /* @kind other */ --display-3-ls:-0.01em; /* @kind other */

  --heading-1-size:28px;   --heading-1-lh:1.15; /* @kind other */ --heading-1-ls:-0.01em; /* @kind other */
  --heading-2-size:24px;   --heading-2-lh:1.20; /* @kind other */ --heading-2-ls:-0.008em; /* @kind other */
  --heading-3-size:18px;   --heading-3-lh:1.30; /* @kind other */ --heading-3-ls:0; /* @kind other */

  /* Label / eyebrow — Medium, caps, tracked. The SerialLabel treatment. */
  --eyebrow-size:12px;     --eyebrow-lh:1.20; /* @kind other */ --eyebrow-ls:0.16em; /* @kind other */

  --body-lg-size:18px;     --body-lg-lh:1.55; /* @kind other */
  --body-md-size:16px;     --body-md-lh:1.55; /* @kind other */
  --body-sm-size:14px;     --body-sm-lh:1.50; /* @kind other */
  --body-xs-size:12px;     --body-xs-lh:1.45; /* @kind other */

  --label-size:13px;       --label-lh:1.20; /* @kind other */ --label-ls:0.08em; /* @kind other */
  --mono-size:15px;        --mono-lh:1.45; /* @kind other */ --mono-ls:0.01em; /* @kind other */

  /* Stat figure — Display/Stat in the guide. Held for when the client confirms numbers. */
  --stat-size:clamp(48px,8vw,88px); --stat-lh:0.95; /* @kind other */ --stat-ls:-0.02em; /* @kind other */
}

/* ---- tokens/spacing.css ---- */
/* Space in multiples of 8 (UI Brand System.pdf): xs 8, sm 16, md 24, lg 40,
   xl 64, 2xl 96. The fine 4px steps stay for control internals only. */
:root{
  --space-xs:8px;
  --space-sm:16px;
  --space-md:24px;
  --space-lg:40px;
  --space-xl:64px;
  --space-2xl:96px;

  --space-0:0px;
  --space-1:2px;
  --space-2:4px;
  --space-3:8px;
  --space-4:12px;
  --space-5:16px;
  --space-6:24px;
  --space-7:24px;
  --space-8:32px;
  --space-9:40px;
  --space-10:48px;
  --space-11:64px;
  --space-12:80px;
  --space-13:96px;
  --space-14:128px;

  --gutter-page:24px;
  --gutter-page-lg:40px;
  --content-max:1200px;
  --content-narrow:720px;
  --section-y:96px;
  --section-y-tight:64px;

  /* Component geometry from the guide */
  --touch-min:44px;
  --touch-target:48px;
  --chip-h:48px;
  --chip-h-hero:72px;
  --stamp-h:56px;
  --modulebar-h:96px;
  --routerule-tick:16px;
  --routerule-terminal:8px;
}

/* ---- tokens/radius.css ---- */
/* Square corners. Nothing rounded. Radius is 0 across the system; the only
   exception is geometry inherited from the approved logotype. Names kept so
   nothing referencing them breaks — they all resolve to 0. */
:root{
  --radius-0:0px;
  --radius-xs:0px;
  --radius-sm:0px;
  --radius-md:0px;
  --radius-lg:0px;
  --radius-xl:0px;
  --radius-pill:0px;

  --border-width-hairline:1px; /* @kind spacing */ /* weak divider */
  --border-width-thick:2px; /* @kind spacing */ /* route rule, stamp, bar divider */
  --border-width-rule:2px; /* @kind spacing */
}

/* ---- tokens/elevation.css ---- */
/* Elevation: none. No shadow on a flat element, on type, on the logo or on a
   photograph. The scrim is a treatment, not a component — navy 0→90%, no blur.
   Stops carry raw rgba on purpose: a variable bound to a stop overrides alpha. */
:root{
  --shadow-none:none;
  --shadow-xs:none;
  --shadow-sm:none;
  --shadow-md:none;
  --shadow-lg:none;
  --shadow-xl:none;
  --shadow-inset-top:none;
  --shadow-focus:0 0 0 2px #ED602A;
  --shadow-focus-inverse:0 0 0 2px #F5F4F2;

  --scrim-bottom:linear-gradient(to top,rgba(11,37,73,.90) 0%,rgba(11,37,73,.55) 45%,rgba(11,37,73,0) 100%); /* @kind color */
  --scrim-left:linear-gradient(to right,rgba(11,37,73,.90) 0%,rgba(11,37,73,.45) 55%,rgba(11,37,73,0) 100%); /* @kind color */
  --scrim-flat:rgba(11,37,73,.55); /* @kind color */
}

/* ---- tokens/motion.css ---- */
/* Motion is short and mechanical. Nothing bounces, nothing springs — freight
   software should feel like a switch being thrown. */
:root{
  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */

  --duration-instant:80ms; /* @kind other */
  --duration-fast:120ms; /* @kind other */
  --duration-base:180ms; /* @kind other */
  --duration-slow:260ms; /* @kind other */
  --duration-page:400ms; /* @kind other */

  --transition-control:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard); /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{--duration-instant:0ms; /* @kind other */--duration-fast:0ms; /* @kind other */--duration-base:0ms; /* @kind other */--duration-slow:0ms; /* @kind other */--duration-page:0ms}
}

/* ---- tokens/base.css ---- */
/* Minimal element defaults — brand rev 1. Sentence case, left aligned, ragged
   right. Headlines Semi Bold; body Regular; labels Medium. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);font-size:var(--body-md-size);line-height:var(--body-md-lh);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-semibold);color:var(--text-strong);margin:0;text-wrap:balance}
h1{font-size:var(--heading-1-size);line-height:var(--heading-1-lh);letter-spacing:var(--heading-1-ls)}
h2{font-size:var(--heading-2-size);line-height:var(--heading-2-lh);letter-spacing:var(--heading-2-ls)}
h3{font-size:var(--heading-3-size);line-height:var(--heading-3-lh);letter-spacing:var(--heading-3-ls)}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--accent);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
code,kbd,samp{font-family:var(--font-mono);font-size:var(--mono-size);font-variant-numeric:tabular-nums}
strong,b{font-weight:var(--weight-medium)} /* emphasis inside a paragraph: Medium, two terms at most */
em{font-style:normal;font-weight:var(--weight-medium)} /* italic is reserved — see .hl */
/* Headline highlight: the half after the declared break, accent Semi Bold Italic. One per piece. */
.hl{font-style:italic;font-weight:var(--weight-semibold);color:var(--accent)}
/* SerialLabel: series label, caps, tracked, no box, no fill, no rule. */
.cts-eyebrow{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--eyebrow-size);line-height:var(--eyebrow-lh);letter-spacing:var(--eyebrow-ls);text-transform:uppercase;color:var(--text-accent)}
/* RouteRule: 16px tick at the left, 8×8 terminal at the right, 2px rule between. */
.cts-rule{border:0;position:relative;display:block;width:96px;height:var(--routerule-terminal);margin:0;background:linear-gradient(var(--navy),var(--navy)) 0 50%/var(--routerule-tick) 2px no-repeat,linear-gradient(var(--navy),var(--navy)) 0 50%/calc(100% - var(--routerule-terminal)) 2px no-repeat}
.cts-rule::after{content:"";position:absolute;right:0;top:0;width:var(--routerule-terminal);height:var(--routerule-terminal);background:var(--accent)}
.cts-numeric{font-variant-numeric:tabular-nums}