/* =========================================================================
   Design Tokens — YouTube-inspired theme for the Shorts AI landing page.
   Kept isolated so the palette/spacing/type system can be reused elsewhere.
   ========================================================================= */

:root {
  /* ---- Brand / action color (used sparingly so it stays premium) ------- */
  --yt-red: #ff0033;
  --yt-red-hover: #cc0000;
  --yt-red-soft: rgba(255, 0, 51, 0.12);
  --yt-red-glow: rgba(255, 0, 51, 0.35);

  /* ---- Ink & text ------------------------------------------------------ */
  --ink: #0f0f0f;
  --ink-2: #272727;
  --text-secondary: #606060;
  --text-tertiary: #909090;
  --text-on-dark: #f5f5f5;
  --text-on-dark-2: #c4c4c4;

  /* ---- Surfaces -------------------------------------------------------- */
  --surface: #ffffff;
  --surface-muted: #f9f9f9;
  --surface-muted-2: #f2f2f2;
  --surface-dark: #0f0f0f;
  --surface-dark-2: #181818;
  --surface-dark-3: #212121;

  /* ---- Borders / dividers --------------------------------------------- */
  --border: #e5e5e5;
  --border-strong: #d0d0d0;
  --border-on-dark: rgba(255, 255, 255, 0.12);

  /* ---- Accent gradients (signature flourish, used with restraint) ------ */
  --grad-brand: linear-gradient(120deg, #ff0033 0%, #ff5e3a 100%);
  --grad-ink: linear-gradient(180deg, #181818 0%, #0f0f0f 100%);
  --grad-spotlight: radial-gradient(
    1200px 600px at 50% -10%,
    rgba(255, 0, 51, 0.10),
    transparent 60%
  );

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
  --font-display: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-display: clamp(2.6rem, 1.4rem + 4.6vw, 4.75rem);
  --fs-h1: clamp(2.1rem, 1.3rem + 3vw, 3.4rem);
  --fs-h2: clamp(1.7rem, 1.15rem + 2vw, 2.6rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.55rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem);
  --fs-body: 1.05rem;
  --fs-small: 0.9rem;
  --fs-eyebrow: 0.8rem;

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  /* ---- Spacing scale (8pt-ish) ---------------------------------------- */
  --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;

  /* Vertical section rhythm */
  --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);

  /* ---- Radii ----------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---- Shadows --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.14);
  --shadow-red: 0 10px 30px rgba(255, 0, 51, 0.28);

  /* ---- Layout ---------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 880px;
  --header-h: 68px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 600ms;

  /* ---- Z-index --------------------------------------------------------- */
  --z-header: 100;
  --z-lightbox: 1000;
}