/* TimeBuilt Solutions -- design tokens. Loaded by every page (via
   styles.css, or directly by the redesigned pages). */
/* ==========================================================================
   Design tokens -- 2026-09 redesign handoff (design_handoff_timebuilt_site)
   ==========================================================================
   The handoff's values are final. Where its README and its prototype HTML
   disagreed (--accent-100, --accent-900, --page, --gut), the README's
   "final and specified" table wins.

   Public Sans is the US Web Design System typeface, so it reads native to
   federal buyers; Roboto Mono carries figures and identifiers. Both are
   self-hosted from assets/fonts (below).
   admin.html loads its own fonts (Oswald, IBM Plex) and pins the tokens it
   depends on, so nothing here restyles the dashboard. */
/* Self-hosted (2026-09-18), as the handoff asks: no third-party request
   before text can render. Both are variable fonts, so one file per character
   range carries every weight. SIL Open Font License, from Google Fonts. */
@font-face {
  font-family: "Public Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../assets/fonts/public-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../assets/fonts/public-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("../assets/fonts/roboto-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("../assets/fonts/roboto-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- Color ---- */
  --bg: #161826;             /* page background, near-black indigo */
  --surface: #232532;        /* raised panel fill, map landmass */
  --section: #262a60;        /* indigo band section background */
  --section-label: #b5afe8;  /* label text on the indigo band */
  --text: #e9e9ed;           /* primary text */
  --accent: #9184d9;         /* primary accent, markers, rules */
  --accent-100: #f2f1fe;
  --accent-200: #e7e5fe;     /* accent text hover, focus ring */
  --accent-300: #d2cefd;     /* accent text, links, mono figures */
  --accent-800: #423a6a;     /* accent borders (badges) */
  --accent-900: #2a2450;     /* accent fill at low emphasis */
  --n-200: #e4e7f5;
  --n-300: #cfd3e5;          /* body copy */
  --n-500: #9397ab;          /* secondary / label copy */
  --n-600: #75798c;          /* tertiary copy */
  --n-700: #595d6c;          /* quiet button border */
  --n-800: #3f424d;
  --n-900: #292b31;          /* hover ground */
  --line: #343844;           /* every hairline and divider */

  /* ---- Typography ---- */
  --font: "Public Sans", system-ui, -apple-system, sans-serif;
  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-hero: clamp(38px, 5.4vw, 64px);     --lh-hero: 1.04;   --tr-hero: -0.03em;
  --fs-h1: clamp(32px, 4.4vw, 46px);       --lh-h1: 1.06;     --tr-h1: -0.03em;
  --fs-h2: clamp(28px, 3vw, 36px);         --lh-h2: 1.15;     --tr-h2: -0.022em;
  --fs-title: 22px;                        --lh-title: 1.2;   --tr-title: -0.018em;
  --fs-figure: clamp(28px, 3.2vw, 40px);   --lh-figure: 1.0;  --tr-figure: -0.028em;
  --fs-body: 16.5px;                       --lh-body: 1.65;
  --fs-sub: 18px;                          --lh-sub: 1.6;
  --fs-body-2: 16px;                       --lh-body-2: 1.7;
  --fs-label: 11.5px;                      --tr-label: 0.12em;
  --fs-table: 14.5px;                      --lh-table: 1.5;
  --fs-mono: 14px;

  /* ---- Spacing & shape ---- */
  --page: 1180px;
  --gut: 34px;               /* 20px under 900px, below */
  --section-y: 64px;         /* every section, top and bottom */
  --phead-top: 52px;         /* page header */
  --phead-bottom: 64px;
  --radius: 8px;

  /* ---- Elevation: two levels ---- */
  --shadow-sm: 0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,.055), 0 10px 26px -16px rgba(0,0,0,.85);
  --elev-2: 0 0 0 1px #3d414e, inset 0 1px 0 rgba(255,255,255,.085), 0 20px 44px -22px rgba(0,0,0,.9);

  /* ---- Motion: one curve, two durations ---- */
  --ease: cubic-bezier(.16,.84,.28,1);
  --dur: 640ms;              /* reveals, masks, slides */
  --dur-fast: 200ms;         /* hover, focus, color */
  --dur-header: 320ms;
  --dur-counter-currency: 1500ms;
  --dur-counter-int: 900ms;

  /* ---- Photo grade: one treatment for every photograph ---- */
  --photo-grade: saturate(.88) contrast(1.06) brightness(.97);
  --photo-grade-hero: saturate(.8) contrast(1.08) brightness(.9);

  /* ---- Legacy names, re-pointed ----------------------------------------
     Every existing component still reads these. Aiming them at the new
     palette re-themes the whole site now; the component rebuild (handoff
     steps 3-4) retires them one by one. Delete a line here only when
     nothing references it. */
  --surface-page: var(--bg);
  --surface-sunken: var(--bg);
  --heading: var(--text);
  --white: #ffffff;
  --gray-900: var(--text);
  --gray-700: var(--n-300);
  --gray-500: var(--n-500);
  --ink-2: var(--n-300);
  --ink-3: var(--n-500);
  --border: var(--line);
  --border-strong: var(--n-800);
  --offwhite: var(--bg);
  --offwhite-2: var(--n-900);
  --navy-dark: var(--bg);
  --navy: var(--section);
  --navy-light: var(--accent-900);
  --navy-lighter: var(--n-700);
  --accent-light: var(--accent-300);
  --gold: var(--accent);
  --gold-light: var(--accent-300);
  --gold-dark: var(--accent-800);
  --gold-hover: var(--accent-200);
  --shadow-md: var(--elev-2);
  --rule: 1px solid var(--line);
  --rule-strong: 1px solid var(--n-800);
  --max-width: var(--page);
  --font-body: var(--font);
  --font-head: var(--font);
  --font-mono: var(--mono);

  /* Safety colours stay: they mean something on a jobsite. */
  --warn: #e2611f;
  --danger: #ef5a4c;
  --caution: #e8b93c;

  /* The old type and spacing scales stay until the components that use
     them are rebuilt. */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: clamp(1.9rem, 2.9vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 3.6vw, 3.25rem);
  --type-xs: 0.75rem;
  --type-sm: 0.8125rem;
  --type-base: 0.9375rem;
  --type-md: 1.0625rem;
  --type-lg: 1.375rem;
  --type-xl: 1.75rem;
  --type-2xl: clamp(1.9rem, 2.9vw, 2.5rem);
  --type-3xl: clamp(2.25rem, 3.6vw, 3.25rem);
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 18px;
  --s5: 28px;
  --s6: 44px;
  --s7: 68px;
  --s8: 104px;
}
@media (max-width: 900px) {
  :root { --gut: 20px; }
}