/* cesar-brand v2.2.0 — dirección "Luz"
   Fuente de verdad: design-system/tokens/design-tokens.json
   GENERADO por design-system/tools/build_tokens.py — no editar a mano.
   Cargar las tipografías: ver el comentario junto a --cd-font-* más abajo. */

:root {
  /* — Color: core — */
  --cd-paper:          #FAF6EE;  /* fondo principal */
  --cd-paper-bright:   #FFFDF9;  /* tarjeta / superficie elevada */
  --cd-ink:            #221C15;  /* texto principal */
  --cd-ink-soft:       #5C5141;  /* texto secundario */
  --cd-ink-800:        #3A3025;  /* rampa oscura: más oscuro que ink-soft, más claro que ink */
  --cd-ink-900:        #1B160F;  /* rampa oscura: el más oscuro, casi negro cálido */
  --cd-terracota:      #C0552A;  /* acento: fills, fondos, gráficos */
  --cd-terracota-700:  #9A3F18;  /* acento sobre claro: texto y enlaces */
  --cd-clay-soft:      #F3EADB;  /* fondo suave */

  /* — Color: soporte — */
  --cd-line:           #E3D6C2;  /* bordes / separadores */
  --cd-arena:          #EADCC6;  /* neutro arena / bandas de slide */
  --cd-terracota-300:  #E0936A;  /* terracota clara / hover */
  --cd-neutral-500:    #8C7E6A;
  --cd-neutral-400:    #A89A85;
  --cd-neutral-300:    #C9BBA6;

  /* — Color: semántico (usa estos en componentes) — */
  --cd-bg:            var(--cd-paper);
  --cd-surface:       var(--cd-paper-bright);
  --cd-surface-alt:   var(--cd-clay-soft);
  --cd-text:          var(--cd-ink);
  --cd-text-muted:    var(--cd-ink-soft);
  --cd-accent:        var(--cd-terracota);
  --cd-accent-text:   var(--cd-terracota-700);
  --cd-border:        var(--cd-line);

  /* — Tipografía — */
  --cd-font-display: 'Bricolage Grotesque', sans-serif;
  --cd-font-text:    'Albert Sans', system-ui, sans-serif;
  --cd-font-mono:    'Space Mono', monospace;
  --cd-fw-regular: 400; --cd-fw-medium: 500; --cd-fw-semibold: 600; --cd-fw-bold: 700; --cd-fw-extrabold: 800;

  /* — Espaciado (base 4) — */
  --cd-sp-1: 4px;  --cd-sp-2: 8px;  --cd-sp-3: 12px; --cd-sp-4: 16px;
  --cd-sp-5: 24px; --cd-sp-6: 32px; --cd-sp-7: 48px; --cd-sp-8: 64px; --cd-sp-9: 96px;

  /* — Radios — */
  --cd-radius-sm: 6px; --cd-radius-md: 12px; --cd-radius-lg: 20px; --cd-radius-pill: 999px;

  /* — Sombras — */
  --cd-shadow-sm: 0 1px 2px rgba(34,28,21,0.06);
  --cd-shadow-md: 0 6px 24px rgba(34,28,21,0.08);
  --cd-shadow-lg: 0 18px 50px rgba(34,28,21,0.12);

  /* — Tipografía: escala (v2.0.0, medida en site.css el 23-09-2026, D5) — */
  --cd-fs-display: 48px;  /* Titular del hero (.h1-hero) */
  --cd-fs-h1: 40px;  /* Título de sección (.cd-section-title, .cd-about-title, .cd-contact-title) */
  --cd-fs-h2: 26px;  /* Título del drawer de ficha de caso (.cd-drawer-title-group h2); baja a h3 (20px) en móvil */
  --cd-fs-h3: 20px;  /* Título de componente: marca, badges, ficha de caso, método, servicio, scope, radar, footer (9 selectores) */
  --cd-fs-stat-lg: 38px;  /* Número de trofeo/hito (.cd-trophy-number) */
  --cd-fs-stat: 32px;  /* Cifra de telemetría (.cd-stat-num) */
  --cd-fs-body: 17px;  /* Párrafos y listas (S1: >=17px desktop, >=16px móvil) */
  --cd-fs-small: 16px;  /* Texto secundario de UI (.hero-tab, .cd-trophy-label) */
  --cd-fs-body-sm: 15px;  /* Boton secundario de contacto, subtitulo de drawer, CTA de drawer, ahora-block movil (4 selectores) */
  --cd-fs-caption: 14px;  /* Fila de impacto (.cd-impact-row) */
  --cd-fs-caption-sm: 13.5px;  /* Pie de footer (.cd-foot-lead) */
  --cd-fs-mono: 13px;  /* Etiquetas y cifras Space Mono, cuota T4 <=25 elementos (valor dominante: 50 declaraciones) */
  --cd-fs-icon-lg: 28px;  /* Glifo del boton de cierre del lightbox (.cd-btn-lightbox-close) */

  /* — Tipografía: interlineado — */
  --cd-lh-tight: 1;
  --cd-lh-display: 1.02;
  --cd-lh-display-tight: 1.05;
  --cd-lh-snug: 1.1;
  --cd-lh-heading: 1.2;
  --cd-lh-heading-loose: 1.3;
  --cd-lh-relaxed-tight: 1.38;
  --cd-lh-lead: 1.45;
  --cd-lh-body: 1.5;
  --cd-lh-body-default: 1.55;
  --cd-lh-body-loose: 1.6;
  --cd-lh-relaxed: 1.7;
  --cd-lh-loose: 1.9;

  /* — Tipografía: tracking — */
  --cd-ls-display-tight: -0.035em;
  --cd-ls-display-snug: -0.03em;
  --cd-ls-heading: -0.025em;
  --cd-ls-heading-loose: -0.02em;
  --cd-ls-text-tight: -0.01em;
  --cd-ls-wide-xs: 0.03em;
  --cd-ls-wide-sm: 0.05em;
  --cd-ls-wide-md: 0.06em;
  --cd-ls-wide: 0.08em;
  --cd-ls-caps: 0.15em;

  /* — Capas (z-index) — */
  --cd-z-glow: 2;  /* Brillo del spotlight (::before local, no global) */
  --cd-z-raised: 10;  /* Elemento elevado sobre su contenedor (badge, boton fullscreen, thumb) */
  --cd-z-popover: 20;  /* Tooltip/panel flotante (.hero-tab) */
  --cd-z-sticky: 60;  /* Cabecera pegajosa (.cd-header) */
  --cd-z-progress: 70;  /* Barra de progreso de scroll, por encima de la cabecera */
  --cd-z-overlay: 1000;  /* Fondo del drawer de ficha de caso (.cd-drawer-overlay) */
  --cd-z-modal: 2000;  /* Modal del lightbox, el mas alto (.cd-lightbox-modal) */

  /* — Alpha para color-mix(in srgb, var(--cd-*) N%, transparent) — */
  --cd-alpha-4: 4%;
  --cd-alpha-5: 5%;
  --cd-alpha-6: 6%;
  --cd-alpha-8: 8%;
  --cd-alpha-10: 10%;
  --cd-alpha-12: 12%;
  --cd-alpha-15: 15%;
  --cd-alpha-16: 16%;
  --cd-alpha-20: 20%;
  --cd-alpha-22: 22%;
  --cd-alpha-25: 25%;
  --cd-alpha-28: 28%;
  --cd-alpha-55: 55%;
  --cd-alpha-72: 72%;
  --cd-alpha-75: 75%;
  --cd-alpha-80: 80%;
  --cd-alpha-85: 85%;
  --cd-alpha-86: 86%;
  --cd-alpha-95: 95%;
  --cd-alpha-98: 98%;

  /* — Quiebres (informativo: @media no lee custom properties; el literal vive en site.css) — */
  --cd-bp-sm: 640px;  /* Ajustes finos de espaciado muy estrecho */
  --cd-bp-md: 768px;  /* Punto de quiebre principal desktop/movil */
  --cd-bp-lg1: 840px;  /* Quiebre intermedio (bento de servicios a 1 columna) */
  --cd-bp-lg2: 960px;  /* Quiebre superior (grids a 1 columna) */

  /* — Layout: contenedor, prosa y paneles de UI — */
  --cd-container: 1140px;  /* Ancho maximo de .container */
  --cd-measure: 640px;  /* Prosa estandar (.cd-section-lead) */
  --cd-measure-sm: 520px;  /* Prosa de contacto (.cd-contact-lead) */
  --cd-measure-xs: 500px;  /* Prosa del hero (.cd-lead-hero) */
  --cd-panel-lg: 780px;  /* Panel del drawer de ficha de caso (.cd-drawer) */
  --cd-panel-xl: 1100px;  /* Contenedor del lightbox (.cd-lightbox-container) */
  --cd-media-box: 600px;  /* Caja de video (.cd-video-wrapper) */

  /* — Foco ([SUPUESTO] WS-3: aún no hay ninguna regla :focus-visible en site.css) — */
  --cd-focus-ring: 0 0 0 3px var(--cd-terracota-700);
  --cd-focus-ring-on-dark: 0 0 0 3px var(--cd-terracota-300);
  --cd-focus-offset: 2px;

  /* — Sobre fondo oscuro (.cd-section-dark) — */
  --cd-on-dark-text: var(--cd-paper);
  --cd-on-dark-muted: var(--cd-neutral-300);
  --cd-on-dark-accent: var(--cd-terracota-300);
  --cd-on-dark-surface: color-mix(in srgb, var(--cd-paper) 5%, transparent);
  --cd-on-dark-border: color-mix(in srgb, var(--cd-paper) 12%, transparent);

  /* — Motion (antes vivía en site.css:1-6) — */
  --cd-dur-fast: 200ms;  /* Micro-interacciones hover: color, opacity, background, transform, gap */
  --cd-dur-base: 250ms;  /* Spotlight hover, drawer-in */
  --cd-dur-slow: 500ms;  /* Revelado progresivo en scroll (.reveal) */
  --cd-dur-pulse: 2400ms;  /* Pulso infinito del punto de telemetria (cd-pulse-anim) */
  --cd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);  /* Entrada elastica de tarjetas y drawer */
  --cd-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* Pulsos ritmicos y transiciones de flujo */

  /* — Tacto — */
  --cd-tap-min: 44px;

  /* Fuentes (Google Fonts, OFL):
     https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Albert+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap */
}

/* — Utilidades base opcionales — */
body.cd { background: var(--cd-bg); color: var(--cd-text); font-family: var(--cd-font-text); font-size: 16.5px; line-height: 1.6; }
.cd h1,.cd h2,.cd .cd-display { font-family: var(--cd-font-display); letter-spacing: -0.01em; }
.cd .cd-display { font-weight: var(--cd-fw-extrabold); line-height: 1.05; }
.cd a { color: var(--cd-accent-text); }
.cd code,.cd .cd-mono { font-family: var(--cd-font-mono); }
.cd-card { background: var(--cd-surface); border: 1px solid var(--cd-border); border-radius: var(--cd-radius-md); box-shadow: var(--cd-shadow-sm); }
::selection { background: var(--cd-terracota); color: var(--cd-paper); }