/* ============================================================
   TakeYourDesign — Design Tokens
   Paleta derivada del logo: negro, rojo #FF0006, blanco
   ============================================================ */

:root {
  /* Marca */
  --brand: #ff0006;
  --brand-strong: #d90005;
  --brand-deep: #8f0003;
  --brand-soft: rgba(255, 0, 6, 0.08);
  --brand-soft-strong: rgba(255, 0, 6, 0.14);
  --brand-glow: rgba(255, 0, 6, 0.35);

  /* Neutros — superficies claras */
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-alt: #f3f3f5;
  --surface-card: #fcfcfc;

  /* Neutros — oscuro */
  --dark: #0b0b0e;
  --dark-2: #121216;
  --dark-3: #1a1a20;

  /* Tinta */
  --ink: #101014;
  --ink-2: #3d3d46;
  --ink-3: #6b6b76;

  /* Tinta sobre oscuro */
  --ink-dark: #f4f4f5;
  --ink-dark-2: #b9b9c2;
  --ink-dark-3: #8b8b95;

  /* Bordes */
  --line: rgba(16, 16, 20, 0.09);
  --line-dark: rgba(244, 244, 245, 0.1);

  /* Tipografía */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Escala fluida */
  --fs-hero: clamp(2.6rem, 6vw, 4.8rem);
  --fs-h2: clamp(2rem, 4vw, 3.2rem);
  --fs-h3: clamp(1.35rem, 2.4vw, 1.8rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Espaciado de sección */
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --container: 1180px;

  /* Header */
  --header-h: 74px;

  /* Radios */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(16, 16, 20, 0.06);
  --shadow-md: 0 12px 32px -12px rgba(16, 16, 20, 0.18);
  --shadow-brand: 0 14px 40px -12px var(--brand-glow);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.18s;
  --t-med: 0.45s;
  --t-slow: 0.8s;
}

/* Container adaptativo para monitores anchos */
@media (min-width: 1600px) { :root { --container: 1400px; } }
@media (min-width: 1920px) { :root { --container: 1600px; } }