@layer tokens {
    @property --beam-angle {
        syntax: '<angle>';
        inherits: false;
        initial-value: 0deg
    }

    @property --radar-angle {
        syntax: '<angle>';
        inherits: false;
        initial-value: 0deg
    }

    @property --border-glow-opacity {
        syntax: '<number>';
        inherits: false;
        initial-value: .15
    }

    @property --glow-spread {
        syntax: '<length>';
        inherits: false;
        initial-value: 20px
    }

    @property --sweep {
        syntax: '<percentage>';
        inherits: false;
        initial-value: -20%
    }

    @property --radar-x {
        syntax: '<percentage>';
        inherits: true;
        initial-value: 68%
    }

    @property --radar-y {
        syntax: '<percentage>';
        inherits: true;
        initial-value: 42%
    }

    @property --counter {
        syntax: '<number>';
        inherits: false;
        initial-value: 0
    }

    :root {
        --pointer-x: 68%;
        --pointer-y: 28%;
        --color-graphite-950: oklch(12% 0.015 250);
        --color-graphite-900: oklch(16% 0.02 250);
        --color-graphite-800: oklch(22% 0.025 250);
        --color-steel-700: oklch(32% 0.02 245);
        --color-steel-400: oklch(65% 0.015 245);
        --color-navy-950: oklch(14% 0.04 240);
        --color-electric-blue: oklch(68% 0.22 235);
        --color-safety-amber: oklch(72% 0.19 55);
        --color-redline-red: oklch(62% 0.23 25);
        --color-success-green: oklch(72% 0.18 145);
        --color-pure-white: oklch(99% 0 0);
        --surface-base: var(--color-graphite-950);
        --surface-panel: var(--color-graphite-900);
        --surface-card: var(--color-graphite-800);
        --surface-card-hover: color-mix(in oklch, var(--color-graphite-800) 85%, var(--color-electric-blue) 15%);
        --surface-card-active: color-mix(in oklch, var(--color-graphite-800) 75%, var(--color-electric-blue) 25%);
        --border-subtle: color-mix(in oklch, var(--color-steel-700) 70%, transparent);
        --border-medium: var(--color-steel-700);
        --border-highlight: color-mix(in oklch, var(--color-electric-blue) 50%, var(--color-steel-700));
        --border-safety: color-mix(in oklch, var(--color-safety-amber) 60%, var(--color-steel-700));
        --border-redline: color-mix(in oklch, var(--color-redline-red) 60%, var(--color-steel-700));
        --text-primary: var(--color-pure-white);
        --text-secondary: color-mix(in oklch, var(--color-pure-white) 78%, var(--color-steel-400));
        --text-muted: var(--color-steel-400);
        --text-accent: var(--color-electric-blue);
        --text-warning: var(--color-safety-amber);
        --text-danger: var(--color-redline-red);
        --glass-bg: color-mix(in oklch, var(--color-graphite-900) 72%, transparent);
        --glass-heavy-bg: color-mix(in oklch, var(--color-graphite-950) 84%, transparent);
        --glass-border: inset 0 1px 0 0 oklch(1 0 0 / .12), inset 0 0 0 1px oklch(100% 0 0 / 0.05);
        --glass-filter: blur(16px) saturate(180%);
        --glass-filter-heavy: blur(28px) saturate(180%);
        --grain-brushed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .015' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        --metal-face: oklch(21.79% 0.0158 244.5);
        --metal-face-hi: oklch(26.27% 0.0206 242.7);
        --metal-face-lo: oklch(17.48% 0.0131 248.6);
        --metal-recess: oklch(16.13% 0.0107 248.5);
        --metal-stamp: oklch(18.07% 0.0207 239.8);
        --metal-stamp-hi: oklch(19.85% 0.0204 239.6);
        --metal-stamp-lo: oklch(12.92% 0.0148 234.2);
        --metal-sheen: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .06) 47%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .06) 53%, transparent 68%);
        --metal-brush: repeating-linear-gradient(91deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px);
        --metal-groove: repeating-linear-gradient(91deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 6px);
        --font-sans: 'IBM Plex Sans', 'Public Sans', system-ui, sans-serif;
        --font-display: 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif;
        --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
        --font-weight-regular: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --font-size-hero: clamp(2.5rem, 1.55rem + 3.6vw, 5.25rem);
        --font-size-h1: clamp(1.85rem, 1.25rem + 2.4vw, 3.15rem);
        --font-size-h2: clamp(1.45rem, 1.15rem + 1.4vw, 2.35rem);
        --font-size-h3: clamp(1.15rem, 1.05rem + .6vw, 1.5rem);
        --font-size-lead: clamp(1.05rem, .98rem + .35vw, 1.25rem);
        --font-size-body: clamp(.9375rem, .9rem + .18vw, 1.0625rem);
        --font-size-small: clamp(.8125rem, .78rem + .15vw, .9375rem);
        --font-size-mono: clamp(.75rem, .72rem + .12vw, .875rem);
        --font-size-micro: .6875rem;
        --line-height-tight: 1.05;
        --line-height-snug: 1.15;
        --line-height-display: 1.06;
        --line-height-heading: 1.22;
        --line-height-body: 1.55;
        --letter-spacing-display: -.018em;
        --letter-spacing-heading: -.012em;
        --letter-spacing-body: 0;
        --letter-spacing-mono: .02em;
        --letter-spacing-caps: .1em;
        --space-1: clamp(.25rem, .2rem + .25vw, .375rem);
        --space-2: clamp(.5rem, .45rem + .25vw, .75rem);
        --space-3: clamp(.75rem, .65rem + .5vw, 1rem);
        --space-4: clamp(1rem, .85rem + .75vw, 1.5rem);
        --space-5: clamp(1.25rem, 1rem + 1vw, 2rem);
        --space-6: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
        --space-8: clamp(2rem, 1.6rem + 2vw, 3.5rem);
        --space-10: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
        --space-12: clamp(3rem, 2.4rem + 3vw, 5.5rem);
        --space-16: clamp(4rem, 3.2rem + 4vw, 7.5rem);
        --space-20: clamp(5rem, 4rem + 5vw, 9.5rem);
        --container-max: 1440px;
        --container-narrow: 1080px;
        --container-gutter: clamp(1rem, .75rem + 1.25vw, 2.5rem);
        --radius-sm: 2px;
        --radius-md: 2px;
        --radius-lg: 4px;
        --radius-xl: 4px;
        --radius-pill: 9999px;
        --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
        --ease-in-out-cubic: cubic-bezier(.65, 0, .35, 1);
        --transition-fast: 150ms var(--ease-out-expo);
        --transition-base: 280ms var(--ease-out-expo);
        --transition-slow: 450ms var(--ease-out-expo);
        --z-background: -1;
        --z-base: 1;
        --z-elevated: 10;
        --z-dropdown: 50;
        --z-header: 100;
        --z-modal: 500;
        --z-toast: 1000
    }
}