@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
  /* Canvas + section panels */
  --bg-canvas: #09090b;
  --bg-white: #0f1012;
  --bg-muted: #141518;

  /* Tile surfaces — neutral darks only, no accent/gradient bg */
  --tile: #141517;
  --tile-alt: #1b1c22;
  --tile-dark: #0c0c10;
  --tile-glass: #1a1c22;

  /* Text ramp */
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --text-faint: #52525b;
  --text-on-accent: #ffffff;
  --text-on-accent-muted: #ffd5ca;
  --text-on-dark: #e4e4e7;

  /* Borders (keep rgba — must work on all bg surfaces) */
  --border-subtle: rgba(255,255,255,0.07);
  --border-default: rgba(255,255,255,0.11);
  --border-strong: rgba(255,255,255,0.20);
  --ring: #FB4F2F;

  /* Accent */
  --accent: #FB4F2F;
  --accent-hover: #FC6347;
  --accent-press: #D54328;
  --accent-2: #22d3e6;
  --accent-soft: #200e08;

  /* Icon surface tokens — solid, no rgba */
  --icon-on-accent: #1e0c06;
  --icon-on-accent-border: #3d1c0e;
  --icon-on-dark: #1c1e26;
  --icon-on-dark-border: #2c2e38;
  --icon-on-dark-teal: #0d2530;
  --icon-on-dark-teal-border: #163848;
  --icon-on-dark-nvidia: #0e1c0c;
  --icon-on-dark-nvidia-border: #1a3016;
  --icon-on-dark-warning: #261e08;
  --icon-on-dark-warning-border: #3a2e0e;

  /* Semantic */
  --success: #34d399;  --success-soft: #0d2318;
  --warning: #fbbf24;  --warning-soft: #251e07;
  --error: #f87171;    --error-soft: #280f0f;
  --info: #8b7bff;     --info-soft: #1e193e;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  --fs-display: clamp(2.5rem, 1.5rem + 4.8vw, 4.5rem);
  --fs-h1: clamp(2.125rem, 1.5rem + 2.8vw, 3.25rem);
  --fs-h2: clamp(1.625rem, 1.25rem + 1.8vw, 2.375rem);
  --fs-tile-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --fs-tile: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --fs-h4: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
  --fs-body: 1rem;
  --fs-body-sm: 0.9375rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* Spacing */
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --space-24: 96px; --space-28: 112px; --space-32: 128px;

  /* Radii */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 20px; --radius-2xl: 24px; --radius-tile: 16px; --radius-pill: 999px;

  /* Containers */
  --container-sm: 680px; --container-md: 840px; --container-lg: 1080px;
  --container-xl: 1200px; --container-2xl: 1320px;
  --gutter: clamp(20px, 5vw, 48px);

  /* Bento grid */
  --bento-gap: clamp(10px, 1.2vw, 16px);
  --bento-row: clamp(150px, 18vw, 210px);
  --tile-pad: clamp(20px, 2.4vw, 32px);

  /* Section rhythm */
  --section-y: clamp(64px, 8vw, 128px);
  --section-y-lg: clamp(96px, 12vw, 184px);
  --stack: clamp(12px, 1.4vw, 18px);

  /* Motion */
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 340ms; --dur-slower: 560ms;
  --ease-out: cubic-bezier(0.2, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}