/* FULL DSGN Design System
   Source: FULL DSGN Design System/tokens
   Light-first, warm-neutral foundation. Lime is an accent, not a theme. */

/* Manrope + JetBrains Mono are loaded via <link> in index.html (preconnect + stylesheet)
   to avoid the render-blocking @import chain. */

@font-face {
  font-family: "Anton";
  src: url("../assets/fonts/Anton-Regular.woff2") format("woff2"),
       url("../assets/fonts/Anton-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-black: #000000;
  --color-ink: #231f20;
  --color-white: #ffffff;
  --color-accent: #bfd730;
  --color-accent-deep: #a8be1f;

  --color-paper: #fbfbf9;
  --color-gray-50: #f4f4f1;
  --color-gray-100: #ecece8;
  --color-gray-200: #dededa;
  --color-gray-300: #c7c7c2;
  --color-gray-400: #a8a8a8;
  --color-gray-500: #8a8a86;
  --color-gray-600: #5e5e5b;
  --color-gray-700: #3a3a3a;
  --color-gray-800: #232323;
  --color-gray-900: #121212;

  --color-success: #bfd730;
  --color-warning: #e3c449;
  --color-error: #e5484d;

  --accent-08: rgba(191, 215, 48, 0.08);
  --accent-12: rgba(191, 215, 48, 0.12);
  --accent-24: rgba(191, 215, 48, 0.24);
  --accent-48: rgba(191, 215, 48, 0.48);

  --surface-page: var(--color-paper);
  --surface-raised: var(--color-white);
  --surface-sunken: var(--color-gray-50);
  --surface-inverse: var(--color-black);
  --surface-accent: var(--color-accent);

  --text-primary: var(--color-ink);
  --text-secondary: var(--color-gray-600);
  --text-muted: var(--color-gray-500);
  --text-faint: var(--color-gray-400);
  --text-on-dark: var(--color-white);
  --text-on-accent: var(--color-black);

  --border-subtle: rgba(35, 31, 32, 0.1);
  --border-strong: rgba(35, 31, 32, 0.22);
  --border-active: var(--color-accent);
  --focus-ring: var(--color-accent);

  --font-display: "Anton", "Arial Black", Impact, sans-serif;
  --font-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", SFMono-Regular, Consolas, monospace;

  --type-display-xl: clamp(3.375rem, 9vw, 9.25rem);
  --type-display-lg: clamp(2.875rem, 7vw, 7.375rem);
  --type-h1: clamp(2.5rem, 5.5vw, 5rem);
  --type-h2: clamp(1.875rem, 3.6vw, 3rem);
  --type-h3: clamp(1.5rem, 2.4vw, 2rem);
  --type-h4: clamp(1.25rem, 1.6vw, 1.5rem);
  --type-lead: clamp(1.0625rem, 1.4vw, 1.375rem);
  --type-body: 1rem;
  --type-body-sm: 0.875rem;
  --type-caption: 0.75rem;
  --type-label: 0.6875rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --leading-display: 0.88;
  --leading-tight: 1.08;
  --leading-snug: 1.4;
  --leading-body: 1.62;

  --tracking-display: 0;
  --tracking-tight: 0;
  --tracking-normal: 0;
  --tracking-label: 0;
  --tracking-eyebrow: 0;
  --tracking-button: 0;

  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  --container: 1240px;
  --container-wide: 1480px;
  --gutter: clamp(20px, 5vw, 88px);
  --section-rhythm: clamp(74px, 11vh, 148px);
  --grid-columns: 12;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --border-hairline: 1px;
  --border-thick: 1.5px;

  --shadow-sm: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(35, 31, 32, 0.06), 0 2px 4px rgba(35, 31, 32, 0.04);
  --shadow-md: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 6px 20px rgba(35, 31, 32, 0.08);
  --shadow-lg: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 18px 48px rgba(35, 31, 32, 0.12);
  --shadow-accent: 0 0 0 1px var(--accent-48), 0 8px 28px rgba(191, 215, 48, 0.32);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-precision: cubic-bezier(0.19, 1, 0.22, 1);
  --motion-fast: 160ms;
  --motion-medium: 360ms;
  --motion-slow: 640ms;
  --motion-cinematic: 920ms;
  --duration-fast: var(--motion-fast);
  --duration-base: var(--motion-medium);
  --duration-slow: var(--motion-slow);
  --delay-stagger: 90ms;

  --breakpoint-sm: 640px;
  --breakpoint-md: 880px;
  --breakpoint-lg: 1040px;
  --breakpoint-xl: 1280px;

  --z-base: 1;
  --z-sticky: 20;
  --z-header: 60;
  --z-menu: 80;
  --z-modal: 100;
  --z-cursor: 120;

  --state-hover-y: -4px;
  --state-press-scale: 0.96;
  --state-disabled-opacity: 0.44;
}

[data-theme="dark"] {
  --surface-page: var(--color-black);
  --surface-raised: #0b0b0b;
  --surface-sunken: #050505;
  --surface-inverse: var(--color-white);

  --text-primary: var(--color-white);
  --text-secondary: rgba(255, 255, 255, 0.72);
  --text-muted: rgba(255, 255, 255, 0.48);
  --text-faint: rgba(255, 255, 255, 0.28);
  --text-on-dark: var(--color-white);

  --border-subtle: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.24);
  --border-active: var(--color-accent);
  --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 20px 60px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 30px 80px rgba(0, 0, 0, 0.42);
}