/* CT Signal design tokens v1.0.0 - compiled 2026-09-30 by reya

   Source of truth: brand/ct-signal/tokens.json

   Values marked DERIVED are not on the style guide; see tokens.json .flags */



/* --- fonts (SIL OFL 1.1, variable) --- */

@font-face{font-family:"Roboto Condensed";src:url("fonts/RobotoCondensed-latin-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

@font-face{font-family:"Roboto Condensed";src:url("fonts/RobotoCondensed-Regular-Italic.latin.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}



:root{

  /* --- colour: documented --- */

  --cts-black:#231F20; --cts-red:#ED1C24; --cts-white:#FFFFFF;

  /* --- colour: derived neutrals (tint ramp of #231F20) --- */

  --cts-neutral-90:#3C3839; --cts-neutral-80:#524E4F; --cts-neutral-70:#6B6768;

  --cts-neutral-60:#847F80; --cts-neutral-50:#9C9899; --cts-neutral-40:#B4B0B1;

  --cts-neutral-30:#CCC8C9; --cts-neutral-20:#E1DEDF; --cts-neutral-10:#F0EEEE;

  --cts-neutral-05:#F8F7F7;

  /* --- colour: derived semantics (provisional) --- */

  --cts-success:#1E7A3C; --cts-warning:#B26A00; --cts-error:#C41E22;

  /* --- semantic roles --- */

  --cts-fg:#231F20; --cts-fg-muted:#6B6768; --cts-bg:#FFFFFF;

  --cts-surface:#F8F7F7; --cts-border:#E1DEDF; --cts-accent:#ED1C24;

  --cts-on-accent:#FFFFFF;



  /* --- type --- */

  --cts-font:"Roboto Condensed","Arial Narrow",Roboto,Arial,sans-serif;

  --cts-weight-regular:400; --cts-weight-bold:700;

  --cts-display:48px; --cts-h1:36px; --cts-h2:28px; --cts-h3:22px;

  --cts-body:16px; --cts-small:14px; --cts-caption:12px; --cts-label:13px;

  --cts-lh-tight:1.1; --cts-lh-heading:1.25; --cts-lh-body:1.55;

  --cts-track-tight:0.01em; --cts-track-label:0.18em;

  --cts-measure:62ch;



  /* --- space / radius --- */

  --cts-space-0:0;  --cts-space-1:4px;  --cts-space-2:8px;  --cts-space-3:12px;

  --cts-space-4:16px; --cts-space-5:24px; --cts-space-6:32px; --cts-space-7:48px;

  --cts-space-8:64px; --cts-space-9:96px;

  --cts-radius-none:0; --cts-radius-sm:2px; --cts-radius-md:4px; --cts-radius-lg:8px;



  /* --- logo --- */

  --cts-logo-ratio:1.9495;

  --cts-logo-clear-space:25%; /* of logo height, all sides (derived) */

}



.cts-label{font-family:var(--cts-font);font-weight:var(--cts-weight-bold);

  font-size:var(--cts-label);letter-spacing:var(--cts-track-label);text-transform:uppercase}

.cts-h1{font-family:var(--cts-font);font-weight:var(--cts-weight-bold);font-size:var(--cts-h1);

  line-height:var(--cts-lh-heading);letter-spacing:var(--cts-track-tight);color:var(--cts-fg);margin:0}

.cts-body{font-family:var(--cts-font);font-size:var(--cts-body);line-height:var(--cts-lh-body);

  color:var(--cts-fg);max-width:var(--cts-measure)}

.cts-btn{font-family:var(--cts-font);font-weight:var(--cts-weight-bold);font-size:var(--cts-body);

  background:var(--cts-red);color:var(--cts-on-accent);border:0;border-radius:var(--cts-radius-sm);

  padding:var(--cts-space-3) var(--cts-space-5);cursor:pointer}

.cts-btn:focus-visible{outline:2px solid var(--cts-black);outline-offset:2px}

.cts-btn--ghost{background:transparent;color:var(--cts-fg);border:1px solid var(--cts-border)}

.cts-logo{display:block;height:auto;width:auto}

.cts-logo--onLight{content:url("logos/cts-logo-black-96dpi.png")}

.cts-logo--onDark{content:url("logos/cts-logo-white-96dpi.png")}

/*

  Ground rules (derived, see tokens.json):

  - one primary CTA per screen; red is a signal, not decoration

  - whitespace generous; never fill space just because it is empty

  - no gradients, no glassmorphism, no decorative shadows

  - never rely on colour alone to carry meaning

*/