/* =============================================================================
   TOKENS DE MARCA — SANZ SPA COACH
   -----------------------------------------------------------------------------
   Cliente:  Sanz Spa Coach (sanzspacoach.com)
   Proyecto: Plan 1 · Sitio Web Profesional · Concepto Creativo · 2026
   Contrato completo de nombres en docs/TOKENS.md.

   Paleta segun briefing del cliente: negro · blanco/minimalista ·
   azul marino · dorado. Las cuatro estan presentes y con rol definido:

     · Blanco       → fondo base del sitio (--cc-bg)
     · Negro        → texto principal y secciones .cc-section--dark (--cc-ink)
     · Azul marino  → color de marca: CTA, iconos, superficies (--cc-brand)
     · Dorado       → acento puntual: cifras, filetes, antetitulos (--cc-accent)

   Las secciones oscuras NO usan clases propias: se resuelven con los
   modificadores del chasis .cc-section--dark y .cc-section--tinted.

   NO renombrar ni eliminar ningun token: el chasis los consume por nombre.
   ============================================================================= */

:root {
  /* ---------- PRIMITIVOS DE MARCA ---------- */
  --cc-c-dark: #0b0b0b;      /* negro de marca */
  --cc-c-brand: #0e1b33;     /* azul marino */
  --cc-c-brand-2: #1d3253;   /* marino claro, para texto y enlaces */
  --cc-c-accent: #c4a46e;    /* dorado champan, desaturado: el oro muy saturado lee amarillo */
  --cc-c-white: #ffffff;
  --cc-c-mist: #f5f3ef;      /* hueso: alterna calida, no gris frio */

  /* ---------- COLOR ---------- */
  --cc-bg: var(--cc-c-white);
  --cc-bg-alt: var(--cc-c-mist);
  --cc-surface: var(--cc-c-white);
  --cc-ink: var(--cc-c-dark);
  --cc-ink-soft: color-mix(in srgb, var(--cc-c-dark) 62%, var(--cc-c-white));
  --cc-ink-inverse: var(--cc-c-mist);
  --cc-brand: var(--cc-c-brand);
  --cc-brand-2: var(--cc-c-brand-2);
  --cc-accent: var(--cc-c-accent);
  --cc-line: color-mix(in srgb, var(--cc-c-dark) 12%, transparent);
  --cc-overlay: color-mix(in srgb, var(--cc-c-dark) 58%, transparent);

  /* NOTA DE CONTRASTE — comprobado
     --cc-brand  (#0e1b33) sobre --cc-bg (#ffffff) → ~17:1. Apto para texto.
     --cc-accent (#c4a46e) sobre --cc-bg (#ffffff) → ~2.2:1. NO usar en texto
       sobre fondo claro: sirve para filetes, iconos, subrayados y fondos de
       badge con texto oscuro encima.
     --cc-accent sobre fondo oscuro (#0b0b0b)      → ~8.4:1. Apto para texto
       dentro de .cc-section--dark, que es donde vive el dorado en este sitio. */

  /* ---------- TIPOGRAFIA ---------- */
  --cc-font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cc-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cc-font-accent: "Instrument Serif", Georgia, "Times New Roman", serif;

  --cc-weight-display: 600;
  --cc-weight-body: 400;
  --cc-tracking-display: -0.025em;
  --cc-leading-display: 1.06;
  --cc-leading-body: 1.7;

  /* Escala fluida: sin cambios respecto a la base del sistema. */
  --cc-text-xs: clamp(0.75rem, 0.727rem + 0.10vw, 0.8125rem);
  --cc-text-sm: clamp(0.875rem, 0.852rem + 0.10vw, 0.9375rem);
  --cc-text-base: clamp(1rem, 0.977rem + 0.10vw, 1.0625rem);
  --cc-text-lg: clamp(1.125rem, 1.079rem + 0.21vw, 1.25rem);
  --cc-text-xl: clamp(1.25rem, 1.157rem + 0.42vw, 1.5rem);
  --cc-text-2xl: clamp(1.5rem, 1.315rem + 0.83vw, 2rem);
  --cc-text-3xl: clamp(1.875rem, 1.644rem + 1.04vw, 2.5rem);
  --cc-text-4xl: clamp(2.25rem, 1.88rem + 1.67vw, 3.25rem);
  --cc-text-5xl: clamp(2.75rem, 2.102rem + 2.92vw, 4.5rem);
  --cc-text-6xl: clamp(3.25rem, 2.231rem + 4.58vw, 6rem);

  /* ---------- FORMA ---------- */
  /* Esquina corta a proposito: precision y autoridad. El redondeo alto lee
     como app amigable y le resta seriedad a una marca de consultoria. */
  --cc-radius-sm: 3px;
  --cc-radius: 4px;
  --cc-radius-lg: 8px;
  --cc-radius-pill: 999px;
  --cc-border-width: 1px;

  /* ---------- ELEVACION ---------- */
  /* Sistema plano: la separacion se resuelve con linea y contraste, no con
     sombra. Se mantienen los tres tokens, deliberadamente discretos. */
  --cc-shadow-sm: 0 1px 2px 0 color-mix(in srgb, var(--cc-c-dark) 8%, transparent);
  --cc-shadow: 0 12px 32px -14px color-mix(in srgb, var(--cc-c-dark) 16%, transparent);
  --cc-shadow-lg: 0 30px 70px -28px color-mix(in srgb, var(--cc-c-dark) 22%, transparent);

  /* ---------- ESPACIADO ---------- */
  /* Esta escala no cambia por marca. Es el ritmo del sistema. */
  --cc-space-unit: 8px;
  --cc-space-1: calc(var(--cc-space-unit) * 0.5); /*   4px */
  --cc-space-2: calc(var(--cc-space-unit) * 1); /*   8px */
  --cc-space-3: calc(var(--cc-space-unit) * 1.5); /*  12px */
  --cc-space-4: calc(var(--cc-space-unit) * 2); /*  16px */
  --cc-space-5: calc(var(--cc-space-unit) * 3); /*  24px */
  --cc-space-6: calc(var(--cc-space-unit) * 4); /*  32px */
  --cc-space-7: calc(var(--cc-space-unit) * 5); /*  40px */
  --cc-space-8: calc(var(--cc-space-unit) * 6); /*  48px */
  --cc-space-9: calc(var(--cc-space-unit) * 7); /*  56px */
  --cc-space-10: calc(var(--cc-space-unit) * 8); /*  64px */
  --cc-space-11: calc(var(--cc-space-unit) * 10); /*  80px */
  --cc-space-12: calc(var(--cc-space-unit) * 12); /*  96px */
  --cc-space-13: calc(var(--cc-space-unit) * 14); /* 112px */
  --cc-space-14: calc(var(--cc-space-unit) * 16); /* 128px */
  --cc-space-15: calc(var(--cc-space-unit) * 20); /* 160px */
  --cc-space-16: calc(var(--cc-space-unit) * 24); /* 192px */

  --cc-section-y: clamp(4rem, 7vw, 8rem);
  --cc-container: 1200px;
  --cc-gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---------- MOVIMIENTO ---------- */
  /* Personalidad media-suave. Curvas cubicas, no exponenciales: una curva
     expo concentra casi todo el recorrido al inicio y en pantalla se lee
     como un salto. Aqui el movimiento se reparte y se asienta despacio. */
  --cc-ease: cubic-bezier(0.33, 1, 0.68, 1);       /* easeOutCubic: revelados */
  --cc-ease-out: cubic-bezier(0.45, 0.05, 0.2, 1); /* in-out suave: hovers */
  --cc-dur-fast: 260ms;
  --cc-dur: 680ms;
  --cc-dur-slow: 1200ms;
  --cc-reveal-y: 28px;
  --cc-reveal-stagger: 120ms;

  /* ---------- BREAKPOINTS ----------
     Si cambia uno aqui, cambiarlo tambien en chassis.css. */
  --cc-bp-sm: 480px;
  --cc-bp-md: 768px;
  --cc-bp-lg: 1024px;
  --cc-bp-xl: 1440px;
}

/* =============================================================================
   ESCALA TIPOGRAFICA BASE
   Lo minimo para que el documento herede la marca. Nada decorativo.
   ============================================================================= */

body {
  background-color: var(--cc-bg);
  color: var(--cc-ink);
  font-family: var(--cc-font-body);
  font-weight: var(--cc-weight-body);
  font-size: var(--cc-text-base);
  line-height: var(--cc-leading-body);
}

h1,
h2,
h3,
h4 {
  font-family: var(--cc-font-display);
  font-weight: var(--cc-weight-display);
  letter-spacing: var(--cc-tracking-display);
  line-height: var(--cc-leading-display);
  color: var(--cc-ink);
}