@layer reset, tokens, base, layout, components, utilities, exceptions;

@layer tokens {
  :root {

    --neutral-0: #FFFFFF;
    --neutral-50: #F5F7FA;
    --neutral-100: #E7EBF0;
    --neutral-200: #D2D8E1;
    --neutral-300: #B3BCC9;
    --neutral-400: #8A93A3;
    --neutral-500: #646D7E;
    --neutral-600: #464E5E;
    --neutral-700: #2F3646;
    --neutral-750: #242A38;
    --neutral-800: #191E29;
    --neutral-850: #12161E;
    --neutral-900: #0C0F15;
    --neutral-950: #070910;
    --neutral-1000: #040509;


    --bg-canvas: var(--neutral-900);
    --bg-deep: var(--neutral-1000);
    --bg-raised: var(--neutral-850);
    --surface-card: var(--neutral-800);
    --surface-hover: var(--neutral-750);

    --text-primary: var(--neutral-50);
    --text-secondary: var(--neutral-300);
    --text-muted: var(--neutral-400);
    --text-faint: var(--neutral-500);
    --text-on-accent: var(--neutral-1000);
    --text-on-light: var(--neutral-900);


    --signal-200: #B3FFB3;
    --signal-300: #80FF80;
    --signal-400: #4DFF4D;
    --signal-500: #00FF00;
    --signal-600: #00D400;
    --signal-700: #00A300;
    --signal-tint-08: rgba(0, 255, 0, 0.08);
    --signal-tint-14: rgba(0, 255, 0, 0.14);
    --signal-tint-24: rgba(0, 255, 0, 0.24);
    --signal-glow: rgba(0, 255, 0, 0.45);


    --line-faint: rgba(255, 255, 255, 0.04);
    --line-hairline: rgba(255, 255, 255, 0.08);
    --line-default: rgba(255, 255, 255, 0.12);
    --line-strong: rgba(255, 255, 255, 0.20);
    --line-accent: var(--signal-500);


    --success-500: #2FC08A;
    --success-300: #6FE0B0;
    --warning-500: #E0A63E;
    --danger-500: #F0636D;
    --danger-300: #FF97A0;


    --scrim-soft: rgba(4, 5, 9, 0.32);
    --scrim-medium: rgba(4, 5, 9, 0.55);
    --scrim-strong: rgba(4, 5, 9, 0.72);
    --gradient-veil-bottom: linear-gradient(to top, rgba(4, 5, 9, 0.85), rgba(4, 5, 9, 0) 55%);
    --gradient-veil-radial: radial-gradient(120% 100% at 50% 0%, rgba(0, 255, 0, 0.05), rgba(4, 5, 9, 0) 60%);
    --gradient-surface-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 40%);


    --font-display: "Outfit", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;


    --fs-display-1: clamp(2.75rem, 1.6rem + 5.4vw, 5.5rem);
    --fs-display-2: clamp(2.25rem, 1.5rem + 3.6vw, 4rem);
    --fs-h1: clamp(2rem, 1.5rem + 2.2vw, 3rem);
    --fs-h2: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
    --fs-h3: clamp(1.3rem, 1.15rem + 0.7vw, 1.625rem);
    --fs-h4: 1.125rem;
    --fs-body-lg: 1.125rem;
    --fs-body: 1rem;
    --fs-body-sm: 0.9375rem;
    --fs-caption: 0.8125rem;
    --fs-label: 0.75rem;
    --fs-overline: 0.6875rem;

    --lh-flat: 1;
    --lh-tight: 1.05;
    --lh-snug: 1.15;
    --lh-base: 1.5;
    --lh-relaxed: 1.65;

    --track-tight: -0.02em;
    --track-snug: -0.01em;
    --track-normal: 0;
    --track-label: 0.08em;
    --track-wide: 0.16em;

    --measure-display: 18ch;
    --measure-narrow: 46ch;
    --measure-base: 66ch;
    --measure-wide: 78ch;


    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;
    --space-11: 10rem;
    --space-12: 12.5rem;


    --section-xs: clamp(2rem, 4vw, 3rem);
    --section-sm: clamp(3rem, 6vw, 4.5rem);
    --section-md: clamp(4rem, 8vw, 7rem);
    --section-lg: clamp(5rem, 10vw, 10rem);


    --container-text: 42rem;
    --container-narrow: 52rem;
    --container-base: 80rem;
    --container-wide: 90rem;
    --gutter: clamp(1rem, 4vw, 3rem);

    --grid-gap: clamp(1rem, 2.4vw, 2rem);
    --grid-gap-tight: 1rem;
    --grid-gap-wide: 2.5rem;


    --hero-min-h: 82svh;


    --radius-none: 0;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-xl: 22px;
    --radius-pill: 999px;
    --radius-round: 50%;


    --border-hair: 1px;
    --border-thick: 2px;


    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.60);
    --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, 0.70);
    --shadow-focus: 0 0 0 3px rgba(0, 255, 0, 0.45);
    --shadow-glow: 0 0 26px -6px rgba(0, 255, 0, 0.45);


    --z-base: 0;
    --z-raised: 10;
    --z-sticky: 100;
    --z-header: 200;
    --z-dropdown: 250;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-max: 999;


    --ratio-square: 1 / 1;
    --ratio-portrait: 4 / 5;
    --ratio-classic: 4 / 3;
    --ratio-photo: 3 / 2;
    --ratio-wide: 16 / 9;
    --ratio-cinema: 21 / 9;


    --dur-instant: 80ms;
    --dur-1: 120ms;
    --dur-2: 200ms;
    --dur-3: 320ms;
    --dur-4: 520ms;
    --dur-5: 800ms;

    --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
    --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-emphasis: cubic-bezier(0.34, 1.4, 0.64, 1);

    --dist-lift-sm: 2px;
    --dist-lift: 4px;
    --dist-reveal: 16px;
    --dist-reveal-lg: 28px;


    --opacity-disabled: 0.45;
    --opacity-muted: 0.7;
    --opacity-scrim: 0.55;

    --target-min-hit: 44px;
    --target-min-hit-inline: 24px;
  }
}