:root {
  /* ── CCO brand tokens ── */
  --cco-vino: #881433;
  --cco-vino-dk: #6a0f27;
  --cco-vino-xdk: #4e0b1d;
  --cco-gold: #bdb046;
  --cco-gold-lt: #d4c84e;
  --cco-gold-dk: #9a8f36;
  --cco-carbon: #141414;
  --cco-carbon-md: #1c1c1c;
  --cco-carbon-lt: #242424;
  --cco-slate: #1e2228;
  --cco-slate-md: #252b33;
  --cco-charcoal: #111111;
  --cco-text: #020202;
  --cco-text-muted: #626262;
  --cco-bg-page: #f0ebe3;
  --cco-white: #ffffff;
  --cco-gold-cta: #efb810;
  --cco-gold-cta-hover: #ad8a1f;
  --cco-btn-text: #540202;

  --cco-font-brand: "CCO Agency FB", "Agency FB", "Agdasima", sans-serif;
  --cco-font-title: "Agdasima", "Saira", sans-serif;
  --cco-font-body: "Saira", Arial, Helvetica, sans-serif;
  --cco-font-content: "Barlow", "Saira", Arial, sans-serif;

  /* Roles semánticos */
  --cco-font-heading: var(--cco-font-title);
  --cco-font-ui: var(--cco-font-body);
  --cco-font-article: var(--cco-font-content);
  --cco-font-display: var(--cco-font-brand);
  --cco-font-label: var(--cco-font-ui);

  /* Escala tipográfica */
  --cco-type-xs: 0.6875rem;
  --cco-type-sm: 0.75rem;
  --cco-type-base: 0.8125rem;
  --cco-type-md: 0.9375rem;
  --cco-type-lg: 1.125rem;
  --cco-type-brand-header: clamp(1.0625rem, 1.2vw, 1.375rem);
  --cco-type-xl: clamp(2rem, 4.5vw, 2.75rem);
  --cco-track-tight: 0.04em;
  --cco-track-label: 0.1em;
  --cco-track-heading: 0.06em;
  --cco-track-nav: 0.08em;

  /* Footer — contraste AA sobre fondo oscuro */
  --cco-ft-text: 0.8125rem;
  --cco-ft-text-sm: 0.75rem;
  --cco-ft-heading: 0.9375rem;
  --cco-ft-label-track: 0.1em;
  --cco-ft-heading-track: 0.06em;
  --cco-ft-muted: rgba(255, 255, 255, 0.82);
  --cco-ft-muted-soft: rgba(255, 255, 255, 0.72);

  --cco-container: 1360px;
  --cco-container-wide: 1440px;
  --cco-header-h: 96px;
  --cco-logo-size: 180px;
  --cco-topbar-h: 38px;
  --cco-ease: 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  --cco-radius: 6px;

  /* ── Alias de layout (componentes internos) ── */
  --cco-font: var(--cco-font-content);
  --cco-text-ui: var(--cco-text);
  --cco-bg-ui: var(--cco-bg-page);
  --cco-legacy-green-dark: var(--cco-vino-xdk);
  --cco-legacy-green-darker: #03060c;
  --cco-legacy-green: var(--cco-vino);
  --cco-legacy-green-mid: var(--cco-vino-dk);
  --cco-legacy-green-soft: var(--cco-slate);
  --cco-legacy-green-card: var(--cco-carbon-md);
  --cco-legacy-orange: var(--cco-gold);
  --cco-legacy-orange-dark: var(--cco-gold-dk);
  --cco-legacy-orange-soft: rgba(189, 176, 70, 0.14);
  --cco-legacy-orange-glow: rgba(189, 176, 70, 0.35);
  --cco-legacy-orange-pattern: var(--cco-gold-lt);
  --cco-legacy-copper: var(--cco-gold-dk);
  --cco-legacy-accent-muted: var(--cco-gold-dk);
  --cco-legacy-accent-link: var(--cco-gold);
  --cco-legacy-accent-link-hover: var(--cco-gold-lt);
  --cco-legacy-brown: var(--cco-charcoal);
  --cco-legacy-white: var(--cco-white);
  --cco-legacy-text-muted: var(--cco-text-muted);
  --cco-legacy-text-soft: #333333;
  --cco-legacy-bg: var(--cco-bg-page);
  --cco-legacy-bg-soft: #f5f5f5;
  --cco-legacy-surface: var(--cco-white);
  --cco-legacy-text: var(--cco-text);
  --cco-legacy-primary: var(--cco-vino);
  --cco-legacy-primary-dark: var(--cco-vino-dk);
  --cco-legacy-border: rgba(0, 0, 0, 0.08);
  --cco-legacy-border-glow: rgba(189, 176, 70, 0.22);
  --cco-legacy-glass: rgba(255, 255, 255, 0.92);
  --cco-legacy-glass-border: rgba(0, 0, 0, 0.06);
  --cco-legacy-gradient-gold: linear-gradient(135deg, var(--cco-gold-lt) 0%, var(--cco-gold) 45%, var(--cco-gold-dk) 100%);
  --cco-legacy-gradient-surface: linear-gradient(165deg, #ffffff 0%, #f5f5f5 100%);
  --cco-legacy-gradient-hero: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(136, 20, 51, 0.06), transparent 55%);
  --cco-legacy-radius: 10px;
  --cco-legacy-radius-lg: 14px;
  --cco-legacy-radius-xl: 20px;
  --cco-container: 1140px;
  --cco-legacy-font: var(--cco-font-content);
  --cco-legacy-font-display: var(--cco-font-display);
  --cco-header-old-h: var(--cco-header-h);
  --cco-legacy-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
  --cco-legacy-shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.08);
  --cco-legacy-shadow-glow: 0 0 40px rgba(189, 176, 70, 0.12);
  --cco-legacy-transition: var(--cco-ease);
  --cco-legacy-ticker-h: var(--cco-topbar-h);
}