@layer tokens {
  :root {
    color-scheme: dark;

    /* Typography */
    --font-display: -apple-system, "SF Pro Display", "Inter Tight", system-ui, sans-serif;
    --font-body: -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;
    --font-mono: "SF Mono", "JetBrains Mono", monospace;

    --text-xs: clamp(0.6875rem, 0.66rem + 0.15vw, 0.8125rem);
    --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
    --text-md: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
    --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
    --text-xl: clamp(1.5rem, 1.1rem + 2vw, 2.75rem);
    --text-hero: clamp(2.5rem, 1.5rem + 4.5vw, 5.5rem);

    /* Space */
    --space-xs: clamp(0.375rem, 0.3rem + 0.3vw, 0.625rem);
    --space-sm: clamp(0.625rem, 0.5rem + 0.4vw, 0.875rem);
    --space-md: clamp(0.875rem, 0.7rem + 0.6vw, 1.25rem);
    --space-lg: clamp(1.25rem, 0.95rem + 1vw, 2rem);
    --space-xl: clamp(1.75rem, 1.2rem + 1.8vw, 3rem);
    --space-2xl: clamp(2.5rem, 1.5rem + 3.5vw, 5rem);

    /* Radius — Apple style generous rounding */
    --radius-sm: 0.875rem;
    --radius-md: 1.25rem;
    --radius-lg: 1.75rem;
    --radius-xl: 2rem;
    --radius-card: clamp(1.25rem, 1rem + 0.8vw, 2rem);
    --radius-pill: 999rem;

    /* Core Neutrals */
    --black-950: hsl(0 0% 0%);
    --black-900: hsl(0 0% 5%);
    --black-800: hsl(0 0% 8%);
    --black-700: hsl(0 0% 11%);
    --black-600: hsl(0 0% 15%);
    --white-100: hsl(0 0% 100%);
    --white-90: hsl(0 0% 100% / 0.92);
    --white-75: hsl(0 0% 100% / 0.75);
    --white-60: hsl(0 0% 100% / 0.6);
    --white-40: hsl(0 0% 100% / 0.4);
    --white-20: hsl(0 0% 100% / 0.2);
    --white-10: hsl(0 0% 100% / 0.1);
    --white-06: hsl(0 0% 100% / 0.06);
    --white-03: hsl(0 0% 100% / 0.03);

    /* Brand Palettes */
    --f1-red: hsl(3 88% 56%);
    --f1-red-soft: hsl(3 88% 56% / 0.15);
    --f1-orange: hsl(25 100% 60%);
    --f1-glow: hsl(3 88% 56% / 0.3);

    --nft-violet: hsl(270 90% 62%);
    --nft-violet-soft: hsl(270 90% 62% / 0.15);
    --nft-cyan: hsl(185 90% 58%);
    --nft-glow: hsl(270 90% 62% / 0.3);

    --food-orange: hsl(28 90% 55%);
    --food-orange-soft: hsl(28 90% 55% / 0.15);
    --food-warm: hsl(45 80% 60%);
    --food-glow: hsl(28 90% 55% / 0.3);

    --know-blue: hsl(212 100% 64%);
    --know-blue-soft: hsl(212 100% 64% / 0.15);
    --know-teal: hsl(180 70% 55%);
    --know-glow: hsl(212 100% 64% / 0.3);

    /* Semantic — defaults to F1 */
    --accent: var(--f1-red);
    --accent-soft: var(--f1-red-soft);
    --accent-glow: var(--f1-glow);

    --bg-app: var(--black-950);
    --bg-card: hsl(0 0% 100% / 0.04);
    --bg-card-hover: hsl(0 0% 100% / 0.07);
    --border-card: hsl(0 0% 100% / 0.08);
    --border-card-hover: hsl(0 0% 100% / 0.14);

    --text-primary: var(--white-90);
    --text-secondary: var(--white-60);
    --text-tertiary: var(--white-40);

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 160ms;
    --dur-mid: 300ms;
    --dur-slow: 600ms;
  }

  .state-input {
    position: fixed;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    inset: 0 auto auto 0;
  }
}