/* ==========================================================================
   SIT Services design system · tokens
   Every value the site uses comes from here. Components reference tokens
   only, never raw values. Light is the default theme; dark is applied by
   [data-theme="dark"] on <html>, or by the system setting when the visitor
   has not chosen. See DESIGN_SYSTEM.md for the reasoning and contrast table.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand constants (same in both themes) ---------- */
  --brand-navy: #0b1533;      /* deepest navy: ink in light, bands in both */
  --brand-indigo: #283890;    /* the logo's wordmark colour */
  --brand-blue: #3050a8;      /* the logo's mid blue */
  --brand-sky: #4088d0;       /* the logo's circuit lines */
  --brand-cyan: #3fb0ea;      /* the logo's highlight; decoration only, never text on white */

  /* ---------- Typography ---------- */
  --font-display: "Bricolage Grotesque", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Six sizes. Fluid between a 360px and a 1280px viewport. */
  --fs-display: clamp(2.375rem, 1.6rem + 3.4vw, 4rem);    /* 38 → 64px, the h1 */
  --fs-h2: clamp(2rem, 1.6rem + 1.8vw, 3rem);             /* 32 → 48px */
  --fs-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);      /* 20 → 24px */
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);/* 18 → 21px */
  --fs-body: 1.0625rem;                                   /* 17px */
  --fs-small: 0.9375rem;                                  /* 15px, the floor */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.05;    /* display */
  --lh-snug: 1.2;      /* h2, h3 */
  --lh-body: 1.6;
  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --measure: 66ch;     /* longest comfortable line of body text */

  /* ---------- Spacing: 4px base ---------- */
  --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;
  --section-gap: clamp(72px, 4rem + 6vw, 128px);  /* between sections */

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 5vw, 40px);
  --nav-height: 72px;
  --tap: 44px;         /* minimum touch target */

  /* ---------- Radii ---------- */
  --radius-sm: 6px;    /* chips, small controls */
  --radius-md: 8px;    /* buttons, inputs */
  --radius-lg: 14px;   /* cards, panels */
  --radius-xl: 20px;   /* bands, large panels */
  --radius-pill: 999px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* entering, responding */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* moving on screen */
  --ease-standard: ease;                             /* colour and hover */
  --dur-press: 140ms;   /* button press */
  --dur-fast: 160ms;    /* hover, colour */
  --dur-base: 220ms;    /* menus, small panels */
  --dur-reveal: 560ms;  /* section entrances, once per page */
  --stagger: 60ms;      /* between items entering together */
  --press-scale: 0.97;
  --lift: -2px;         /* card hover lift */

  /* ---------- Layers ---------- */
  --z-nav: 100;
  --z-menu: 110;
  --z-skip: 200;

  /* ==========================================================
     LIGHT THEME (default)
     ========================================================== */
  color-scheme: light;
  --color-bg: #ffffff;
  --color-surface: #f4f7fc;        /* sections and cards set off the page */
  --color-surface-2: #e8eef9;      /* hover and pressed surfaces, tiles */
  --color-surface-raised: #ffffff; /* cards and form panel on a surface */
  --color-ink: #0b1533;            /* headings and body text, 18:1 */
  --color-ink-2: #3f4c6b;          /* supporting text, 8.6:1 */
  --color-ink-3: #566381;          /* captions and metadata, 6.0:1 */
  --color-border: #d5deed;         /* dividers and card edges (decorative) */
  --color-control: #7a8aad;        /* input and control borders, 3.5:1 */
  --color-accent: #1f4fe0;         /* electric blue: actions and focus, 6.5:1 */
  --color-accent-hover: #1a41bd;
  --color-accent-ink: #ffffff;     /* text on accent */
  --color-accent-text: #1a45c9;    /* links and accent text, 7.7:1 */
  --color-accent-soft: #e7eeff;    /* selected and highlighted backgrounds */
  --color-band: #0b1533;           /* the dark call-to-action band */
  --color-band-ink: #ffffff;
  --color-band-ink-2: #b6c2de;
  --color-success: #11734f;
  --color-danger: #b42318;
  --color-focus: #1f4fe0;
  --color-logo-plate: transparent; /* the logo sits directly on white */

  --circuit-line: #c3d1ea;
  --circuit-node: #3050a8;
  --circuit-pulse: #1f4fe0;
  --circuit-label: #3f4c6b;

  --shadow-sm: 0 1px 2px rgba(11, 21, 51, 0.06), 0 1px 1px rgba(11, 21, 51, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(11, 21, 51, 0.10), 0 2px 4px rgba(11, 21, 51, 0.05);
  --shadow-lg: 0 18px 40px -12px rgba(11, 21, 51, 0.18), 0 4px 10px rgba(11, 21, 51, 0.06);
  --shadow-focus: 0 0 0 3px rgba(31, 79, 224, 0.28);
}

/* ==========================================================
   DARK THEME
   Applied when the visitor chooses it, or when their system
   prefers dark and they have not chosen light.
   ========================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #070d1f;
  --color-surface: #0d1631;
  --color-surface-2: #152245;
  --color-surface-raised: #111c3b;
  --color-ink: #f2f5fc;            /* 17.7:1 */
  --color-ink-2: #b6c2de;          /* 10.8:1 */
  --color-ink-3: #909dbf;          /* 7.1:1 */
  --color-border: #24335f;
  --color-control: #56699d;        /* 3.6:1 */
  --color-accent: #4f8cff;         /* 6.0:1 on the page */
  --color-accent-hover: #79a8ff;
  --color-accent-ink: #070d1f;     /* dark text on the bright blue, 6.0:1 */
  --color-accent-text: #7eacff;    /* 8.5:1 */
  --color-accent-soft: #13275a;
  --color-band: #111c3b;
  --color-band-ink: #f2f5fc;
  --color-band-ink-2: #b6c2de;
  --color-success: #3fd39a;
  --color-danger: #ff8a7a;
  --color-focus: #7eacff;
  --color-logo-plate: #ffffff;     /* the navy logo needs a white plate on dark */

  --circuit-line: #24335f;
  --circuit-node: #7eacff;
  --circuit-pulse: #3fb0ea;
  --circuit-label: #b6c2de;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 20px -6px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 20px 44px -12px rgba(0, 0, 0, 0.65);
  --shadow-focus: 0 0 0 3px rgba(126, 172, 255, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #070d1f;
    --color-surface: #0d1631;
    --color-surface-2: #152245;
    --color-surface-raised: #111c3b;
    --color-ink: #f2f5fc;
    --color-ink-2: #b6c2de;
    --color-ink-3: #909dbf;
    --color-border: #24335f;
    --color-control: #56699d;
    --color-accent: #4f8cff;
    --color-accent-hover: #79a8ff;
    --color-accent-ink: #070d1f;
    --color-accent-text: #7eacff;
    --color-accent-soft: #13275a;
    --color-band: #111c3b;
    --color-band-ink: #f2f5fc;
    --color-band-ink-2: #b6c2de;
    --color-success: #3fd39a;
    --color-danger: #ff8a7a;
    --color-focus: #7eacff;
    --color-logo-plate: #ffffff;
    --circuit-line: #24335f;
    --circuit-node: #7eacff;
    --circuit-pulse: #3fb0ea;
    --circuit-label: #b6c2de;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 20px -6px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 20px 44px -12px rgba(0, 0, 0, 0.65);
    --shadow-focus: 0 0 0 3px rgba(126, 172, 255, 0.35);
  }
}

/* Reduced motion: keep colour and opacity changes, drop travel and scale. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --press-scale: 1;
    --lift: 0px;
    --dur-reveal: 200ms;
    --stagger: 0ms;
  }
}