/* Thomax design tokens v0.1 (2026-09-25, concept stage). Mirror: tokens.json. Usage rules: BRAND.md. */
:root {
  /* Brand anchors (unchanged from the current brand) */
  --brand-navy: #0F1423;
  --brand-cyan: #00B5FF;
  --brand-blue: #002DB2;
  --brand-signal: #FF1F4A;
  --brand-mist: #D2DADE;
  --brand-haze: #E4E9EB;

  /* Colour scales. AA text steps: see BRAND.md contrast table */
  --color-cyan-50: #EAF8FF;
  --color-cyan-100: #CCEFFF;
  --color-cyan-200: #99DEFF;
  --color-cyan-300: #5CCBFF;
  --color-cyan-400: #1FBCFF;
  --color-cyan-500: #00B5FF;
  --color-cyan-600: #0095D1;
  --color-cyan-700: #0072A3;
  --color-cyan-800: #005680;
  --color-cyan-900: #003D5C;
  --color-cyan-950: #002538;
  --color-blue-50: #EEF2FF;
  --color-blue-100: #DCE4FF;
  --color-blue-200: #B8C9FF;
  --color-blue-300: #8AA6FF;
  --color-blue-400: #5B80FF;
  --color-blue-500: #2E5BF0;
  --color-blue-600: #1240D6;
  --color-blue-700: #002DB2;
  --color-blue-800: #002391;
  --color-blue-900: #001A6B;
  --color-blue-950: #00104A;
  --color-signal-50: #FFF0F3;
  --color-signal-100: #FFDDE3;
  --color-signal-200: #FFB8C6;
  --color-signal-300: #FF8AA0;
  --color-signal-400: #FF5475;
  --color-signal-500: #FF1F4A;
  --color-signal-600: #E0002F;
  --color-signal-700: #B80027;
  --color-signal-800: #8F001F;
  --color-signal-900: #660016;
  --color-signal-950: #40000E;
  --color-ink-50: #F6F8F9;
  --color-ink-100: #EEF2F4;
  --color-ink-200: #E4E9EB;
  --color-ink-300: #D2DADE;
  --color-ink-400: #AEB9C0;
  --color-ink-500: #86929C;
  --color-ink-600: #5F6B77;
  --color-ink-700: #434D5A;
  --color-ink-800: #2B3342;
  --color-ink-850: #222938;
  --color-ink-900: #1B2130;
  --color-ink-925: #151B2B;
  --color-ink-950: #0F1423;
  --color-green-50: #EAFBF2;
  --color-green-100: #C9F2DC;
  --color-green-200: #94E3BA;
  --color-green-300: #57CE92;
  --color-green-400: #24B571;
  --color-green-500: #12995A;
  --color-green-600: #0B7D48;
  --color-green-700: #08653A;
  --color-green-800: #084F2F;
  --color-green-900: #073A23;
  --color-green-950: #042415;
  --color-amber-50: #FFF7E6;
  --color-amber-100: #FFEAC2;
  --color-amber-200: #FFD585;
  --color-amber-300: #FFBD45;
  --color-amber-400: #F5A316;
  --color-amber-500: #DB8A00;
  --color-amber-600: #B06E00;
  --color-amber-700: #8A5600;
  --color-amber-800: #6B4300;
  --color-amber-900: #4D3000;
  --color-amber-950: #2E1C00;
  --color-white: #FFFFFF;

  /* Gradients. brand = fills and marks only; text-on-* are AA-safe for headline text */
  --gradient-brand: linear-gradient(-30deg, #00B5FF 11%, #002DB2 57%);
  --gradient-text-on-dark: linear-gradient(-30deg, #00B5FF 11%, #5B80FF 57%);
  --gradient-text-on-light: linear-gradient(-30deg, #0072A3 11%, #002DB2 57%);
  --gradient-navy-depth: linear-gradient(180deg, #151B2B 0%, #0F1423 60%);

  /* Semantic colour, light theme (default) */
  --c-bg: var(--color-white);
  --c-bg-subtle: var(--color-ink-50);
  --c-surface: var(--color-white);
  --c-surface-raised: var(--color-white);
  --c-surface-sunken: var(--color-ink-100);
  --c-border: var(--color-ink-200);
  --c-border-strong: var(--color-ink-300);
  --c-text: var(--color-ink-950);
  --c-text-muted: var(--color-ink-600);
  --c-text-inverse: var(--color-white);
  --c-link: var(--color-blue-700);
  --c-link-hover: var(--color-blue-900);
  --c-accent-text: var(--color-cyan-700);
  --c-signal-text: var(--color-signal-700);
  --c-success-text: var(--color-green-700);
  --c-warning-text: var(--color-amber-700);
  --c-success-bg: var(--color-green-50);
  --c-warning-bg: var(--color-amber-50);
  --c-info-bg: var(--color-blue-50);
  --c-neutral-bg: var(--color-ink-100);
  --c-focus: var(--color-blue-600);
  --c-action-bg: var(--color-blue-700);
  --c-action-bg-hover: var(--color-blue-800);
  --c-action-text: var(--color-white);
  --c-action-secondary-border: var(--color-ink-950);
  --c-action-secondary-text: var(--color-ink-950);
  --c-gradient-text: var(--gradient-text-on-light);

  /* Type */
  --font-family-sans: 'Work Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-family-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --text-display: clamp(2.75rem, 1.55rem + 4.4vw, 5rem);
  --text-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --text-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.75rem);
  --text-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --text-h4: 1.25rem;
  --text-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-body: 1.0625rem;
  --text-small: 0.9375rem;
  --text-caption: 0.8125rem;
  --text-overline: 0.75rem;
  --leading-tight: 1.04;
  --leading-snug: 1.15;
  --leading-heading: 1.2;
  --leading-body: 1.6;
  --leading-ui: 1.35;
  --tracking-display: -0.035em;
  --tracking-heading: -0.02em;
  --tracking-body: 0;
  --tracking-overline: 0.14em;

  /* Space and layout */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-section: clamp(4rem, 2.5rem + 6vw, 8rem);
  --space-gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --layout-max: 80rem;
  --layout-text: 42rem;
  --layout-wide: 90rem;

  /* Radii, elevation, motion */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgb(15 20 35 / 0.06), 0 1px 1px rgb(15 20 35 / 0.04);
  --shadow-2: 0 4px 12px -2px rgb(15 20 35 / 0.10), 0 2px 4px -2px rgb(15 20 35 / 0.06);
  --shadow-3: 0 16px 32px -8px rgb(15 20 35 / 0.18), 0 4px 8px -4px rgb(15 20 35 / 0.08);
  --shadow-4: 0 32px 64px -16px rgb(15 20 35 / 0.30), 0 8px 16px -8px rgb(15 20 35 / 0.12);
  --shadow-glow: 0 0 0 1px rgb(0 181 255 / 0.25), 0 24px 64px -24px rgb(0 181 255 / 0.35);
  --motion-duration-fast: 120ms;
  --motion-duration-base: 200ms;
  --motion-duration-slow: 320ms;
  --motion-duration-slower: 560ms;
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-emphasised: cubic-bezier(0.3, 0, 0, 1);
  --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

/* Dark theme: apply to <html> or any section. Navy-led surfaces. */
[data-theme="dark"] {
  --c-bg: var(--color-ink-950);
  --c-bg-subtle: var(--color-ink-925);
  --c-surface: var(--color-ink-900);
  --c-surface-raised: var(--color-ink-850);
  --c-surface-sunken: #0B0F1B;
  --c-border: var(--color-ink-800);
  --c-border-strong: var(--color-ink-700);
  --c-text: var(--color-ink-50);
  --c-text-muted: var(--color-ink-400);
  --c-text-inverse: var(--color-ink-950);
  --c-link: var(--color-cyan-400);
  --c-link-hover: var(--color-cyan-200);
  --c-accent-text: var(--color-cyan-500);
  --c-signal-text: var(--color-signal-400);
  --c-success-text: var(--color-green-300);
  --c-warning-text: var(--color-amber-300);
  --c-success-bg: rgb(36 181 113 / 0.14);
  --c-warning-bg: rgb(245 163 22 / 0.14);
  --c-info-bg: rgb(91 128 255 / 0.16);
  --c-neutral-bg: rgb(210 218 222 / 0.10);
  --c-focus: var(--color-cyan-400);
  --c-action-bg: var(--color-cyan-500);
  --c-action-bg-hover: var(--color-cyan-300);
  --c-action-text: var(--color-ink-950);
  --c-action-secondary-border: var(--color-ink-300);
  --c-action-secondary-text: var(--color-ink-50);
  --c-gradient-text: var(--gradient-text-on-dark);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-duration-fast: 0ms; --motion-duration-base: 0ms; --motion-duration-slow: 0ms; --motion-duration-slower: 0ms; }
}