/* TechXYZ — generated from tokens.json */
:root, [data-theme="light"] {
  --azure-50: #ecf8ff; /* Brand-soft panels and callouts (`surface-brand-soft`, `color-info-soft`); avatar fallback ground. */
  --azure-100: #cfeeff; /* Avatar fallback border; brand-soft callout borders. */
  --azure-200: #9fdcff; /* Text selection highlight. */
  --azure-300: #5fc6fb; /* Light azure accent step. */
  --azure-400: #1faef6; /* Start of `gradient-spark`; the XYZ superscript and azure accents on ink grounds. */
  --azure-500: #00abfc; /* Logo blue — brand spark. Accent, glow and focus colour; ink-900 text on it reads 6.3:1, white only 2.6:1, so never a large flat fill under white text. */
  --azure-600: #0089ce; /* Solid primary action fill (`color-primary`), end of `gradient-spark`, brand icons on light surfaces. */
  --azure-700: #066ba1; /* Links (`text-link`) on surface-card and surface-page (5.8:1 / 5.4:1); primary hover; brand text on azure-50 (5.4:1). */
  --azure-800: #0b557f; /* Link hover; primary pressed. */
  --azure-900: #0f4665; /* Deepest azure step. */
  --ink-950: #081726; /* Darkest ink — end of `gradient-ink`. */
  --ink-900: #0c2236; /* Logo navy — primary ink. Strong text (16:1 on white) and the dark ground for heroes, sidebars and footers. */
  --ink-800: #122e47; /* Secondary hover; second ink surface; start of `gradient-ink`. */
  --ink-700: #1b3d5c; /* Secondary pressed. */
  --ink-600: #294f71; /* Lightest ink step. */
  --neutral-0: #ffffff; /* White — cards and raised surfaces; text on ink and brand fills. */
  --neutral-50: #f5f8fa; /* Page background (`surface-page`). */
  --neutral-100: #eaf0f4; /* Sunken surfaces, hover washes, disabled fields (`surface-sunken`). */
  --neutral-200: #d9e2e9; /* Subtle borders and table rules (`border-subtle`). */
  --neutral-300: #bcc9d4; /* Default control borders (`border-default`). */
  --neutral-400: #8e9fae; /* Strong borders and subtle text (`border-strong`, `text-subtle`). */
  --neutral-500: #647888; /* Muted text (`text-muted`). */
  --neutral-600: #4a5c6b; /* Slate step between muted and body. */
  --neutral-700: #364654; /* Neutral badge text on surface-sunken (8.5:1); solid neutral badge fill. */
  --neutral-800: #243441; /* Body text (`text-body`). */
  --neutral-900: #14222e; /* Darkest slate. */
  --success-50: #e7f7f0; /* Success soft background (`color-success-soft`). */
  --success-100: #c3ebd9; /* Success tint. */
  --success-500: #16a571; /* Success fill and status dot (`color-success`). White text on it is 3.2:1 — under 4.5:1 for small labels. */
  --success-600: #0e8a5d; /* Success heading text on white. */
  --success-700: #0b6e4b; /* Success text on success-50 (5.7:1). */
  --warning-50: #fdf3e2; /* Warning soft background (`color-warning-soft`). */
  --warning-100: #fae2bb; /* Warning tint. */
  --warning-500: #e8920c; /* Warning fill and status dot (`color-warning`). White text on it is 2.5:1 — fails as a text ground. */
  --warning-600: #c5790a; /* Warning hover. */
  --warning-700: #9a5e08; /* Warning text on warning-50 (4.8:1). */
  --danger-50: #fcedec; /* Danger soft background (`color-danger-soft`). */
  --danger-100: #f7d2cf; /* Focus ring of an invalid field. */
  --danger-500: #e0473d; /* Danger fill, error borders and messages (`color-danger`). White on it and it on white are 4.1:1 — under 4.5:1 for small text. */
  --danger-600: #c5362d; /* Danger hover; danger heading text. */
  --danger-700: #9e2922; /* Danger pressed; danger text on danger-50 (6.6:1). */
  --color-brand: var(--azure-500); /* The brand spark: eyebrows, accents, active icons on brand surfaces. */
  --color-brand-ink: var(--ink-900); /* The brand's navy ink. */
  --color-spark: var(--azure-500); /* The spark accent and glow. */
  --color-primary: var(--azure-600); /* Primary action fill — one per view. The source calls white text on it AA; measured 3.8:1, so it passes only for large text (3:1). */
  --color-primary-hover: var(--azure-700); /* Primary hover. */
  --color-primary-active: var(--azure-800); /* Primary pressed. */
  --color-on-primary: var(--neutral-0); /* Label on color-primary (3.8:1). */
  --color-secondary: var(--ink-900); /* Secondary action fill (ink). */
  --color-secondary-hover: var(--ink-800); /* Secondary hover. */
  --color-secondary-active: var(--ink-700); /* Secondary pressed. */
  --color-on-secondary: var(--neutral-0); /* Label on color-secondary (16:1). */
  --text-strong: var(--ink-900); /* Headings and strong text on surface-card and surface-page (16:1 / 15:1). */
  --text-body: var(--neutral-800); /* Body copy on surface-card and surface-page (12.8:1 / 12:1). */
  --text-muted: var(--neutral-500); /* Secondary text and metadata: 4.6:1 on surface-card, 4.3:1 on surface-page (just under 4.5:1). */
  --text-subtle: var(--neutral-400); /* Placeholders and leading field icons; 2.7:1 on surface-card — below text contrast. */
  --text-on-brand: var(--neutral-0); /* Text and icons on ink and brand fills (16:1 on surface-ink). */
  --text-link: var(--azure-700); /* Links on surface-card and surface-page (5.8:1 / 5.4:1). */
  --text-link-hover: var(--azure-800); /* Link hover (8:1 on white). */
  --surface-page: var(--neutral-50); /* Page background — the default light ground. */
  --surface-card: var(--neutral-0); /* Cards, inputs, popovers. */
  --surface-raised: var(--neutral-0); /* Raised panels. */
  --surface-sunken: var(--neutral-100); /* Sunken areas, ghost hover wash, disabled fields. */
  --surface-ink: var(--ink-900); /* The dramatic dark ground: heroes, footers, sidebar. */
  --surface-ink-2: var(--ink-800); /* Raised surfaces on ink. */
  --surface-brand-soft: var(--azure-50); /* Callouts highlighted without going dark. */
  --border-subtle: var(--neutral-200); /* Hairline borders of cards and table rows. */
  --border-default: var(--neutral-300); /* Input and control borders; 1.7:1 on surface-card — under 3:1. */
  --border-strong: var(--neutral-400); /* Hovered control borders; 2.7:1 on surface-card. */
  --border-brand: var(--azure-500); /* Brand-state borders. */
  --border-focus: var(--azure-500); /* Focused field border; 2.6:1 on surface-card. */
  --color-success: var(--success-500); /* Success status fill and dot. */
  --color-success-soft: var(--success-50); /* Success soft background. */
  --color-warning: var(--warning-500); /* Warning status fill and dot. */
  --color-warning-soft: var(--warning-50); /* Warning soft background. */
  --color-danger: var(--danger-500); /* Danger fill, invalid borders and error messages. */
  --color-danger-soft: var(--danger-50); /* Danger soft background. */
  --color-info: var(--azure-500); /* Info status. */
  --color-info-soft: var(--azure-50); /* Info soft background. */
  --shadow-xs: 0 1px 2px rgba(12, 34, 54, 0.06); /* Outline buttons at rest. */
  --shadow-sm: 0 1px 3px rgba(12, 34, 54, 0.08), 0 1px 2px rgba(12, 34, 54, 0.06); /* Cards at rest; secondary and danger buttons. */
  --shadow-md: 0 4px 10px rgba(12, 34, 54, 0.08), 0 2px 4px rgba(12, 34, 54, 0.06); /* Cards on hover; popovers. */
  --shadow-lg: 0 12px 28px rgba(12, 34, 54, 0.12), 0 4px 10px rgba(12, 34, 54, 0.07); /* Popovers and menus. */
  --shadow-xl: 0 24px 56px rgba(12, 34, 54, 0.16), 0 8px 20px rgba(12, 34, 54, 0.08); /* Hero surfaces and modals. */
  --shadow-brand: 0 8px 24px rgba(0, 171, 252, 0.28); /* Brand glow — the spark on the primary CTA. */
  --glow-spark: 0 0 0 1px rgba(0,171,252,0.4), 0 6px 20px rgba(0,171,252,0.25); /* Spark glow on key CTAs and active/selected states. */
  --shadow-inset: inset 0 1px 2px rgba(12, 34, 54, 0.08); /* Sunken fields and pressed states. */
  --ring-brand: 0 0 0 3px rgba(0, 171, 252, 0.35); /* Focus ring — always visible (RGAA/WCAG). A 35% azure-500 ring: under 3:1 against surface-card. */
}
:root {
  --space-0: 0; /* No space. */
  --space-1: 0.25rem; /* 4px. */
  --space-2: 0.5rem; /* 8px. */
  --space-3: 0.75rem; /* 12px. */
  --space-4: 1rem; /* 16px. */
  --space-5: 1.5rem; /* 24px — the page gutter; card padding. */
  --space-6: 2rem; /* 32px — default card padding. */
  --space-7: 2.5rem; /* 40px. */
  --space-8: 3rem; /* 48px. */
  --space-9: 4rem; /* 64px. */
  --space-10: 5rem; /* 80px. */
  --space-11: 6rem; /* 96px — marketing section rhythm. */
  --space-12: 8rem; /* 128px. */
  --radius-xs: 4px; /* Checkboxes; focus-ring corners. */
  --radius-sm: 6px; /* Small elements. */
  --radius-md: 10px; /* Buttons, inputs, chips. */
  --radius-lg: 14px; /* Cards. */
  --radius-xl: 20px; /* Panels, modals. */
  --radius-2xl: 28px; /* Hero surfaces. */
  --radius-pill: 999px; /* Tags, badges, pills. */
  --radius-circle: 50%; /* Avatars and dots. */
  --text-2xs: 0.6875rem; /* 11px — micro labels, legal. */
  --text-xs: 0.75rem; /* 12px — captions, meta, eyebrows. */
  --text-sm: 0.875rem; /* 14px — secondary UI text, labels. */
  --text-md: 1rem; /* 16px — body default. */
  --text-lg: 1.125rem; /* 18px — lead body. */
  --text-xl: 1.375rem; /* 22px — card / section titles. */
  --text-2xl: 1.75rem; /* 28px — H3. */
  --text-3xl: 2.25rem; /* 36px — H2. */
  --text-4xl: 3rem; /* 48px — H1. */
  --text-5xl: 4rem; /* 64px — hero. */
  --text-6xl: 5.25rem; /* 84px — display hero. */
  --weight-light: 300; /* Montserrat Light — the tagline lockup. */
  --weight-regular: 400; /* Body text. */
  --weight-medium: 500; /* Orbitron Medium — the XYZ in the mark. */
  --weight-semibold: 600; /* Labels, buttons, eyebrows. */
  --weight-bold: 700; /* Orbitron Bold — the TECH in the mark; Montserrat headings. */
  --weight-display: 800; /* Orbitron headings sit heavy. */
  --leading-none: 1; /* Hero display. */
  --leading-tight: 1.12; /* Display headings. */
  --leading-snug: 1.28; /* Headings. */
  --leading-normal: 1.5; /* UI text. */
  --leading-relaxed: 1.7; /* Body copy. */
  --tracking-tighter: -0.02em; /* Large display. */
  --tracking-tight: -0.01em; /* Hero and wordmark. */
  --tracking-normal: 0em; /* Default. */
  --tracking-wide: 0.04em; /* Labels. */
  --tracking-wider: 0.12em; /* Eyebrows / overlines (uppercase). */
  --tracking-widest: 0.26em; /* The CREATIVE ENGINEERING tagline. */
  --container-sm: 640px; /* Narrow reading column. */
  --container-md: 820px; /* Medium content width. */
  --container-lg: 1080px; /* Wide content width. */
  --container-xl: 1240px; /* Marketing page max width. */
  --control-sm: 2rem; /* 32px — small controls. */
  --control-md: 2.75rem; /* 44px — default control height. */
  --control-lg: 3.25rem; /* 52px — large controls. */
  --border-w-hair: 1px; /* Hairlines on cards, inputs, rows. */
  --border-w: 1.5px; /* Control borders. */
  --border-w-bold: 2px; /* Emphasised borders. */
  --z-base: 1; /* Base layer. */
  --z-sticky: 100; /* Sticky top bar. */
  --z-overlay: 1000; /* Overlays and scrims. */
  --z-modal: 1100; /* Modals. */
  --z-toast: 1200; /* Toasts. */
  --font-display: "Orbitron", "Montserrat", system-ui, sans-serif;
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  --text-type-hero: 800 5.25rem/1 var(--font-display); /* Display hero (`--type-hero-*`). */
  --text-type-wordmark: 700 56px/1 var(--font-display); /* Wordmark: TECH in Orbitron Bold 700, XYZ in Orbitron Medium 500 (azure). */
  --text-type-heading: 700 22px/1.28 var(--font-sans); /* Headings — Montserrat bold by default. */
  --text-type-body: 400 1rem/1.7 var(--font-sans); /* Body copy. */
  --text-type-label: 600 0.875rem/1.4 var(--font-sans); /* Field labels. */
  --text-type-eyebrow: 600 0.75rem/1.4 var(--font-sans); /* Eyebrows / overlines — uppercase (the `.eyebrow` helper). */
  --text-type-tagline: 300 13px/1.4 var(--font-sans); /* The tagline — uppercase (the `.tagline` helper). */
}
.type-hero {
  font-family: var(--font-display);
  font-size: 5.25rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.type-wordmark {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.type-heading {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: 0;
}
.type-body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0;
}
.type-label {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.type-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.type-tagline {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 300;
  letter-spacing: 0.26em;
}
@font-face {
  font-family: "Orbitron";
  src: url("fonts/Orbitron-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Italic-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}