/* UTC design system tokens v1. Direction F "Lights Out".
   Source of truth. Load first, before base.css and components.css.
   Theme: light by default. Dark ("lights out") is set with <html data-theme="dark">. */

:root {
  /* ---------- Raw palette (never use directly in components) ---------- */
  --raw-ink-950: #121416;
  --raw-ink-900: #1E2123;
  --raw-ink-700: #454C4F;
  --raw-ink-600: #5B6366;
  --raw-ink-500: #6F777A;
  --raw-ink-300: #B7BDBF;
  --raw-ink-250: #8E9699;
  --raw-line-200: #C3C8C9;
  --raw-paper-100: #E6E8E7;
  --raw-paper-50: #F3F4F3;
  --raw-white: #FFFFFF;
  --raw-red-600: #A90412;
  --raw-red-700: #8E0310;
  --raw-red-800: #74020D;
  --raw-red-100: #FBE3E4;
  --raw-coral-400: #FF6B5E;

  /* ---------- Semantic colour (light theme) ---------- */
  --bg-dark: var(--raw-ink-950);          /* primary dark background */
  --bg-dark-2: var(--raw-ink-900);        /* secondary dark background */
  --bg-light: var(--raw-paper-50);        /* light background, the page */
  --bg-secondary: var(--raw-paper-100);   /* secondary background, bands */
  --bg-surface: var(--raw-paper-100);     /* surface: rows, inputs, panels */
  --bg-elevated: var(--raw-white);        /* elevated: dropdown, sticky bar, form card */
  --bg-signal: var(--raw-red-600);        /* red field: hero and final CTA only */

  --text: var(--raw-ink-900);             /* 14.68 on light */
  --text-2: var(--raw-ink-700);           /* 7.94 on light */
  --text-muted: var(--raw-ink-600);       /* 5.57 on light, 4.99 on surface */
  --text-on-dark: var(--raw-paper-50);    /* 16.75 on dark */
  --text-on-signal: var(--raw-white);     /* 7.74 on red */
  --text-on-signal-2: var(--raw-red-100); /* 6.34 on red */

  --border: var(--raw-line-200);          /* decorative hairline, 1.53, never alone for controls */
  --border-control: var(--raw-ink-500);   /* 4.14 on light, form fields and outlined buttons */
  --border-strong: var(--raw-ink-900);

  --brand: var(--raw-red-600);            /* 7.02 on light */
  --brand-hover: var(--raw-red-700);
  --brand-active: var(--raw-red-800);
  --brand-on-dark: var(--raw-coral-400);  /* 6.61 on dark; brand red itself is 2.39 on dark */

  --success: #1B6B38;   /* 5.94 on light */
  --warning: #7A4F00;   /* 6.47 on light */
  --warning-fill: #F2B134;
  --error: #B42318;     /* 5.96 on light */

  --focus: var(--raw-ink-900);            /* focus ring, plus 2px offset in white or ink */

  /* ---------- Type ---------- */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-tech: "Space Grotesk", "Manrope", system-ui, sans-serif;

  --fs-display: clamp(3.25rem, 2.2rem + 5.2vw, 8.25rem);   /* 52 to 132 */
  --fs-h1: clamp(2.25rem, 1.7rem + 2.6vw, 4rem);            /* 36 to 64 */
  --fs-h2: clamp(1.75rem, 1.4rem + 1.7vw, 2.75rem);         /* 28 to 44 */
  --fs-h3: clamp(1.3125rem, 1.15rem + 0.8vw, 1.75rem);      /* 21 to 28 */
  --fs-h4: clamp(1.125rem, 1.07rem + 0.3vw, 1.25rem);       /* 18 to 20 */
  --fs-body-lg: clamp(1.125rem, 1.07rem + 0.3vw, 1.25rem);  /* 18 to 20 */
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);      /* 16 to 17 */
  --fs-small: clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem); /* 14 to 15 */
  --fs-label: clamp(0.8125rem, 0.8rem + 0.08vw, 0.875rem);  /* 13 to 14 */
  --fs-nav: 0.9375rem;                                      /* 15 */
  --fs-tech: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);   /* 15 to 17 */
  --fs-btn: 1rem;
  --fs-btn-lg: 1.125rem;

  --lh-display: 0.92;
  --lh-h1: 1.02;
  --lh-h2: 1.08;
  --lh-h3: 1.2;
  --lh-h4: 1.3;
  --lh-body: 1.6;
  --lh-body-lg: 1.55;
  --lh-small: 1.5;

  --ls-display: -0.045em;
  --ls-h1: -0.035em;
  --ls-h2: -0.03em;
  --ls-h3: -0.02em;
  --ls-h4: -0.01em;
  --ls-label: 0.01em;

  --measure-display: 12ch;
  --measure-h1: 18ch;
  --measure-h2: 24ch;
  --measure-lead: 62ch;
  --measure-body: 68ch;
  --measure-small: 72ch;

  /* ---------- Space (4px base) ---------- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  --section-y: clamp(4rem, 3rem + 4vw, 7rem);   /* 64 mobile to 112 desktop */
  --section-y-tight: clamp(2.5rem, 2rem + 2vw, 4rem);
  --container-pad: clamp(1.25rem, 0.8rem + 2vw, 3.5rem); /* 20 to 56 */
  --stack-text: var(--space-4);     /* between paragraphs and heading to text */
  --stack-heading: var(--space-5);  /* section heading block to content */
  --card-pad: clamp(1.25rem, 1rem + 1vw, 2rem);

  /* ---------- Grid ---------- */
  --container-max: 1280px;   /* includes padding, content 1168 */
  --container-wide: 1440px;  /* hero only */
  --gutter: 1rem;            /* mobile 16 */
  --cols: 4;

  /* ---------- Radius, border, shadow ---------- */
  --r-0: 0;
  --r-1: 6px;      /* buttons, inputs, badges, accordions */
  --r-sign-sm: 12px; /* small sign tile */
  --r-sign: 20px;    /* large sign tile, the only big radius on the site */
  --bw-hair: 1px;
  --bw-strong: 2px;
  --bw-sign-rim: 4px;
  --shadow-none: none;
  --shadow-lift: 0 8px 24px rgba(18, 20, 22, 0.14);   /* dropdown, sticky bar */
  --shadow-sign: 0 18px 30px rgba(0, 0, 0, 0.18);     /* signs mounted on the red field only */

  /* ---------- Motion ---------- */
  --dur-micro: 120ms;
  --dur-std: 200ms;
  --dur-reveal: 360ms;
  --dur-major: 600ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --move-hover: -2px;
  --move-reveal: 12px;
  --stagger: 60ms;
}

@media (min-width: 640px) {
  :root { --gutter: 1.25rem; --cols: 8; }  /* tablet 20 */
}
@media (min-width: 960px) {
  :root { --gutter: 1.5rem; --cols: 12; }  /* desktop 24 */
}

/* ---------- Dark theme: "lights out" ---------- */
:root[data-theme="dark"] {
  --bg-light: var(--raw-ink-950);
  --bg-secondary: var(--raw-ink-900);
  --bg-surface: var(--raw-ink-900);
  --bg-elevated: #272B2E;
  --bg-signal: var(--raw-ink-950);       /* the red field goes dark; signs stay red */

  --text: var(--raw-paper-50);
  --text-2: var(--raw-ink-300);          /* 9.71 on dark */
  --text-muted: var(--raw-ink-250);      /* 6.13 on dark, 5.38 on surface */
  --text-on-signal: var(--raw-paper-50);
  --text-on-signal-2: var(--raw-ink-250);

  --border: #2E3235;
  --border-control: #6F777A;
  --border-strong: var(--raw-paper-50);

  --brand: var(--raw-coral-400);         /* text and links on dark */
  --brand-hover: #FF8A80;
  --brand-active: #FFA8A0;

  --success: #4CC27A;   /* 8.18 on dark */
  --warning: #F2B134;   /* 9.77 */
  --error: #FF7A70;     /* 7.27 */
  --focus: var(--raw-paper-50);
  --shadow-sign: 0 0 60px rgba(255, 255, 255, 0.28); /* lit signs */
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 0ms; --dur-std: 0ms; --dur-reveal: 0ms; --dur-major: 0ms;
    --move-hover: 0px; --move-reveal: 0px; --stagger: 0ms;
  }
}