/* ==========================================================================
   DESIGN TOKENS & GLOBAL CSS VARIABLES
   Exact token parity with Overtake Framer Template
   ========================================================================== */

@font-face {
  font-family: "Switzer";
  src: url("../fonts/switzer-600.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: "Switzer";
  src: url("../fonts/switzer-500.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Stack Sans Headline";
  src: url("../fonts/stack-sans-headline-400.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-variable.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400 800;
}

@font-face {
  font-family: "Switzer";
  src: url("../fonts/switzer-700.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

:root {
  /* Color Palette - Core Neutrals */
  --color-canvas: #ffffff;
  --color-surface-light: #f5f5f5;
  --color-surface-pill: #f0f0f0;
  --color-surface-alt: #edebe3;
  --color-border-light: rgba(0, 0, 0, 0.08);
  --color-border-lighter: rgba(0, 0, 0, 0.04);
  --color-grid-line: rgba(0, 0, 0, 0.035);
  --color-grid-line-dark: rgba(255, 255, 255, 0.045);
  
  /* Color Palette - Dark Surfaces */
  --color-dark-bg: #0b0b0c;
  --color-dark-surface: #121314;
  --color-dark-card: #161718;
  --color-dark-card-elevated: #1e1f20;
  --color-dark-border: rgba(255, 255, 255, 0.1);
  --color-dark-border-subtle: rgba(255, 255, 255, 0.06);

  /* Color Palette - High-Impact Accents */
  --color-accent-lime: #9efc65;
  --color-accent-lime-bright: #8fff00;
  --color-accent-lime-glow: rgba(158, 252, 101, 0.45);
  --color-accent-lime-soft: rgba(158, 252, 101, 0.15);
  --color-accent-pink: #ffbcfc;
  --color-accent-lemon: #fde589;
  --color-accent-orange: #ff742e;

  /* Typography Colors */
  --text-primary: #0b0b0c;
  --text-secondary: #6a6e6e;
  --text-muted: #8b8b8b;
  --text-inverse: #ffffff;
  --text-inverse-secondary: #b7bcbc;
  --text-inverse-muted: #6a6e6e;

  /* Typography Font Stacks */
  --font-display: 'Switzer', Arial, sans-serif;
  --font-sans: 'Stack Sans Headline', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Texture & Noise Overlay */
  --noise-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.035'/%3E%3C/svg%3E");

  /* Elevation & Multi-layer Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 20px 48px -8px rgba(0, 0, 0, 0.14), 0 4px 12px -2px rgba(0, 0, 0, 0.06);
  --shadow-glow-lime: 0 0 24px rgba(158, 252, 101, 0.45), 0 0 60px rgba(158, 252, 101, 0.2);
  --shadow-inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-inset-dark: inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* Radius Tokens */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 40px;
  --radius-full: 9999px;

  /* Transition Curves */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.2s var(--ease-smooth);
  --transition-normal: 0.35s var(--ease-smooth);
  --transition-slow: 0.6s var(--ease-smooth);
}

/*
 * The hero intentionally uses the newer Switzer / Stack Sans pairing. From
 * Channels onward, restore the earlier homepage typography without changing
 * any content, spacing, or component structure.
 */
main > .fanned-channels-section,
main > .fanned-channels-section ~ * {
  --font-display: "Switzer", "Inter", "Plus Jakarta Sans", Arial, sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-inter: "Inter";
  --font-jakarta: "Plus Jakarta Sans";
  font-family: var(--font-sans);
}