/* Intact Works design tokens — generated by tools/build-tokens.mjs from brand/tokens.source.mjs. Do not edit by hand.
   Palette "Penetrant", type Geologica. Light theme: visible dye penetrant. Dark theme: the fluorescent booth.
   Breakpoints (for reference; custom properties can't be used in media queries): s 30rem, m 48rem, l 64rem, xl 80rem, xxl 100rem. */

:root {
  /* named hues (light / dark values) */
  --iw-developer: #F2F3F0;
  --iw-developer-dark: #F1EEF5;
  --iw-booth-dark: #171A20;
  --iw-carbon: #14171D;
  --iw-steel: #575E68;
  --iw-steel-dark: #AAB2BF;
  --iw-penetrant: #C4122F;
  --iw-penetrant-dark: #FF5470;
  --iw-uv: #6536C8;
  --iw-uv-dark: #AE8CFF;
  --iw-pass: #1D7347;
  --iw-pass-dark: #4FD08E;
  --iw-hold: #9A5800;
  --iw-hold-dark: #F5B64A;
  --color-family-tile: #15191E;
  --color-family-ink: #F1F3F5;
  
  /* type */
  --font-sans: 'Geologica', 'Geologica Fallback', system-ui, sans-serif;
  --text-display-xl: clamp(3.25rem, 1.4355rem + 8.0645vw, 9.5rem);
  --leading-display-xl: 0.94;
  --tracking-display-xl: -0.04em;
  --weight-display-xl: 640;
  --sharp-display-xl: 100;
  --text-display: clamp(2.3rem, 1.8065rem + 2.1935vw, 4rem);
  --leading-display: 1.06;
  --tracking-display: -0.04em;
  --weight-display: 500;
  --sharp-display: 0;
  --text-h1: clamp(2.1rem, 1.5484rem + 2.4516vw, 4rem);
  --leading-h1: 1.04;
  --tracking-h1: -0.03em;
  --weight-h1: 620;
  --sharp-h1: 100;
  --text-h2: clamp(1.65rem, 1.3306rem + 1.4194vw, 2.75rem);
  --leading-h2: 1.1;
  --tracking-h2: -0.022em;
  --weight-h2: 600;
  --sharp-h2: 70;
  --text-h3: clamp(1.3rem, 1.1694rem + 0.5806vw, 1.75rem);
  --leading-h3: 1.2;
  --tracking-h3: -0.012em;
  --weight-h3: 580;
  --sharp-h3: 40;
  --text-lead: clamp(1.15rem, 1.0774rem + 0.3226vw, 1.4rem);
  --leading-lead: 1.5;
  --tracking-lead: -0.005em;
  --weight-lead: 400;
  --sharp-lead: 0;
  --text-body: clamp(1rem, 0.9637rem + 0.1613vw, 1.125rem);
  --leading-body: 1.62;
  --tracking-body: 0em;
  --weight-body: 400;
  --sharp-body: 0;
  --text-small: clamp(0.875rem, 0.8569rem + 0.0806vw, 0.9375rem);
  --leading-small: 1.55;
  --tracking-small: 0.002em;
  --weight-small: 400;
  --sharp-small: 0;
  --text-caption: clamp(0.78rem, 0.7706rem + 0.0419vw, 0.8125rem);
  --leading-caption: 1.45;
  --tracking-caption: 0.01em;
  --weight-caption: 450;
  --sharp-caption: 0;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 580;
  --weight-bold: 640;
  --measure: 68ch;
  
  /* space */
  --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-gutter: clamp(1rem, 0.55rem + 2vw, 2.5rem);
  --space-section: clamp(4rem, 2.5rem + 5vw, 7.5rem);
  --space-section-s: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  --space-container: 90rem;
  
  /* radius */
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --radius-tile: 25%;
  
  /* motion */
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 450ms;
  --dur-slower: 700ms;
  --dur-draw: 950ms;
  --dur-hero: 1500ms;
  --dur-theme: 520ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-settle: linear(0, 0.25 9%, 0.52 18%, 0.74 28%, 0.9 39%, 0.99 51%, 1.02 62%, 1.01 76%, 1);
  --stagger-line: 70ms;
  --stagger-item: 90ms;
  --stagger-card: 120ms;
  --move-s: 12px;
  --move-m: 32px;
  --move-l: 80px;
  --parallax-s: 0.04;
  --parallax-m: 0.08;
  --parallax-l: 0.14;
  
  /* light theme */
  --color-bg: #F2F3F0;
  --color-bg-alt: #E9EBE7;
  --color-surface: #FFFFFF;
  --color-surface-2: #F7F8F6;
  --color-text: #14171D;
  --color-muted: #575E68;
  --color-line: #D8DBDE;
  --color-control: #7B828B;
  --color-accent: #C4122F;
  --color-accent-hover: #A50E27;
  --color-on-accent: #FFFFFF;
  --color-accent-soft: #FBE7EA;
  --color-secondary: #6536C8;
  --color-secondary-soft: #ECE5FA;
  --color-glow: rgba(196, 18, 47, .22);
  --color-success: #1D7347;
  --color-success-soft: #E1F1E7;
  --color-attention: #9A5800;
  --color-attention-soft: #F8EBD6;
  --color-focus: #6536C8;
  --color-selection: rgba(101, 54, 200, .22);
  --color-logo-mark: #C4122F;
  --color-logo-word: #14171D;
  --shadow-1: 0 1px 1px rgba(20,23,29,.04), 0 2px 6px -2px rgba(20,23,29,.06);
  --shadow-2: 0 1px 2px rgba(20,23,29,.05), 0 8px 24px -8px rgba(20,23,29,.12);
  --shadow-3: 0 2px 4px rgba(20,23,29,.05), 0 24px 64px -24px rgba(20,23,29,.22);
  --glow-accent: 0 10px 30px -10px rgba(196,18,47,.45);
  --glow-uv: 0 0 0 1px rgba(101,54,200,.10), 0 20px 60px -20px rgba(101,54,200,.30);
  color-scheme: light;
}

[data-theme="light"] {
  --color-bg: #F2F3F0;
  --color-bg-alt: #E9EBE7;
  --color-surface: #FFFFFF;
  --color-surface-2: #F7F8F6;
  --color-text: #14171D;
  --color-muted: #575E68;
  --color-line: #D8DBDE;
  --color-control: #7B828B;
  --color-accent: #C4122F;
  --color-accent-hover: #A50E27;
  --color-on-accent: #FFFFFF;
  --color-accent-soft: #FBE7EA;
  --color-secondary: #6536C8;
  --color-secondary-soft: #ECE5FA;
  --color-glow: rgba(196, 18, 47, .22);
  --color-success: #1D7347;
  --color-success-soft: #E1F1E7;
  --color-attention: #9A5800;
  --color-attention-soft: #F8EBD6;
  --color-focus: #6536C8;
  --color-selection: rgba(101, 54, 200, .22);
  --color-logo-mark: #C4122F;
  --color-logo-word: #14171D;
  --shadow-1: 0 1px 1px rgba(20,23,29,.04), 0 2px 6px -2px rgba(20,23,29,.06);
  --shadow-2: 0 1px 2px rgba(20,23,29,.05), 0 8px 24px -8px rgba(20,23,29,.12);
  --shadow-3: 0 2px 4px rgba(20,23,29,.05), 0 24px 64px -24px rgba(20,23,29,.22);
  --glow-accent: 0 10px 30px -10px rgba(196,18,47,.45);
  --glow-uv: 0 0 0 1px rgba(101,54,200,.10), 0 20px 60px -20px rgba(101,54,200,.30);
  color-scheme: light;
}

[data-theme="dark"] {
  --color-bg: #171A20;
  --color-bg-alt: #1C2027;
  --color-surface: #20252D;
  --color-surface-2: #282E38;
  --color-text: #F1EEF5;
  --color-muted: #AAB2BF;
  --color-line: #353C47;
  --color-control: #7B8595;
  --color-accent: #FF5470;
  --color-accent-hover: #FF7389;
  --color-on-accent: #171A20;
  --color-accent-soft: #3A1A2A;
  --color-secondary: #AE8CFF;
  --color-secondary-soft: #2D2445;
  --color-glow: rgba(174, 140, 255, .30);
  --color-success: #4FD08E;
  --color-success-soft: #173326;
  --color-attention: #F5B64A;
  --color-attention-soft: #36291A;
  --color-focus: #AE8CFF;
  --color-selection: rgba(174, 140, 255, .32);
  --color-logo-mark: #FF5470;
  --color-logo-word: #F1EEF5;
  --shadow-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 2px 6px -2px rgba(0,0,0,.5);
  --shadow-2: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-3: 0 1px 0 rgba(255,255,255,.05) inset, 0 30px 80px -30px rgba(0,0,0,.75);
  --glow-accent: 0 10px 36px -8px rgba(255,84,112,.45);
  --glow-uv: 0 0 0 1px rgba(174,140,255,.16), 0 24px 80px -16px rgba(174,140,255,.35);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #171A20;
    --color-bg-alt: #1C2027;
    --color-surface: #20252D;
    --color-surface-2: #282E38;
    --color-text: #F1EEF5;
    --color-muted: #AAB2BF;
    --color-line: #353C47;
    --color-control: #7B8595;
    --color-accent: #FF5470;
    --color-accent-hover: #FF7389;
    --color-on-accent: #171A20;
    --color-accent-soft: #3A1A2A;
    --color-secondary: #AE8CFF;
    --color-secondary-soft: #2D2445;
    --color-glow: rgba(174, 140, 255, .30);
    --color-success: #4FD08E;
    --color-success-soft: #173326;
    --color-attention: #F5B64A;
    --color-attention-soft: #36291A;
    --color-focus: #AE8CFF;
    --color-selection: rgba(174, 140, 255, .32);
    --color-logo-mark: #FF5470;
    --color-logo-word: #F1EEF5;
    --shadow-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 2px 6px -2px rgba(0,0,0,.5);
    --shadow-2: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 32px -12px rgba(0,0,0,.6);
    --shadow-3: 0 1px 0 rgba(255,255,255,.05) inset, 0 30px 80px -30px rgba(0,0,0,.75);
    --glow-accent: 0 10px 36px -8px rgba(255,84,112,.45);
    --glow-uv: 0 0 0 1px rgba(174,140,255,.16), 0 24px 80px -16px rgba(174,140,255,.35);
    color-scheme: dark;
  }
}

/* Reduced motion: durations collapse, so anything built on the tokens resolves at once. Choreography in JS must
   also check the media query and render its final state. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-slower: 0ms;
    --dur-draw: 0ms;
    --dur-hero: 0ms;
    --dur-theme: 0ms;
    --stagger-line: 0ms;
    --stagger-item: 0ms;
    --stagger-card: 0ms;
    --parallax-s: 0;
    --parallax-m: 0;
    --parallax-l: 0;
  }
}