/* CRATECUTZ · Sistema de diseño "Cabina" · Fase 1, paso 5
   Fuente de verdad de tokens para la Fase 2 (Wix Headless / Astro).
   Hueso y cobalto medidos del logo. Contrastes calculados contra --cc-bg. */


:root {
  /* Color · base */
  --cc-black: #0A0A0B;        /* negro vinilo */
  --cc-bone: #F2E8D5;         /* hueso (logo) */
  --cc-cobalt: #0356F1;       /* cobalto (logo) */
  --cc-cobalt-light: #4D84FF; /* cobalto para texto sobre negro */
  --cc-amber: #FFB547;        /* LED: solo "en vivo" y alertas */

  /* Color · semánticos */
  --cc-bg: var(--cc-black);
  --cc-surface: #17171A;      /* cards, player */
  --cc-surface-2: #202024;    /* hover de cards, inputs */
  --cc-line: #2A2A30;         /* divisores */
  --cc-line-strong: #3A3A40;  /* bordes de controles */
  --cc-text: var(--cc-bone);  /* 16:1 */
  --cc-text-2: #E2D9C6;       /* lectura larga, 14:1 */
  --cc-muted: #A39C8E;        /* secundario, 7.3:1 */
  --cc-faint: #8A8478;        /* metadatos, 5.4:1 */
  --cc-brand: var(--cc-cobalt);          /* botón principal; texto hueso encima 4.8:1 */
  --cc-brand-press: #0247C9;             /* presionado */
  --cc-brand-text: var(--cc-cobalt-light); /* links y acentos, 5.7:1 */
  --cc-live: var(--cc-amber);            /* 11:1 */
  --cc-error: #FF6B5A;                   /* 7:1, siempre con texto, nunca solo color */
  --cc-focus: var(--cc-cobalt-light);
  --cc-invert-bg: var(--cc-bone);        /* bandas invertidas (tienda) */
  --cc-invert-text: var(--cc-black);
  --cc-invert-muted: #5E584D;            /* 5.8:1 sobre hueso */

  /* Tipografía · familias */
  --cc-font-display: "Archivo", system-ui, sans-serif;       /* usar con font-stretch: 62% y mayúsculas */
  --cc-font-body: "Archivo", system-ui, sans-serif;          /* font-stretch: 100% */
  --cc-font-accent: "Instrument Serif", Georgia, serif;      /* solo itálica, 1–3 palabras */
  --cc-font-mono: "JetBrains Mono", ui-monospace, monospace; /* BPM, precios, catálogo, fechas */
  --cc-stretch-display: 62%;

  /* Tipografía · escala escritorio (tamaño / interlínea) */
  --cc-display-xl: 160px; --cc-display-xl-lh: .82;
  --cc-display-l: 112px;  --cc-display-l-lh: .86;
  --cc-h1: 72px;          --cc-h1-lh: .9;
  --cc-h2: 48px;          --cc-h2-lh: .95;
  --cc-h3: 28px;          --cc-h3-lh: 1.05;
  --cc-h4: 20px;          --cc-h4-lh: 1.2;
  --cc-body-l: 19px;      --cc-body-l-lh: 1.55;
  --cc-body: 16px;        --cc-body-lh: 1.55;
  --cc-small: 14px;       --cc-small-lh: 1.45;
  --cc-mono: 13px;        --cc-mono-tracking: .06em;
  --cc-mono-s: 11px;      --cc-mono-s-tracking: .08em;

  /* Espaciado (base 4) */
  --cc-space-1: 4px;  --cc-space-2: 8px;  --cc-space-3: 12px; --cc-space-4: 16px;
  --cc-space-5: 24px; --cc-space-6: 32px; --cc-space-7: 48px; --cc-space-8: 64px;
  --cc-space-9: 96px; --cc-space-10: 128px;
  --cc-section-y: 128px;     /* padding vertical de banda */
  --cc-gutter: 24px;         /* 12 columnas */
  --cc-margin: 64px;
  --cc-container: 1440px;

  /* Forma y luz */
  --cc-radius-0: 0;
  --cc-radius-1: 2px;        /* botones, chips, inputs */
  --cc-radius-round: 999px;  /* solo controles redondos: play, dial */
  --cc-border: 1px solid var(--cc-line);
  --cc-border-strong: 1px solid var(--cc-line-strong);
  --cc-glow: 0 0 0 1px var(--cc-cobalt-light), 0 0 32px rgba(3, 86, 241, .75);
  --cc-halo: radial-gradient(circle, rgba(3, 86, 241, .42), rgba(3, 86, 241, 0) 65%);

  /* Movimiento */
  --cc-ease: cubic-bezier(.2, .8, .2, 1);   /* "aguja que cae" */
  --cc-dur-1: 120ms;  /* presionar */
  --cc-dur-2: 200ms;  /* hover, glow */
  --cc-dur-3: 400ms;  /* entrar/salir paneles */
  --cc-rev-33: 1.8s;  /* una vuelta a 33⅓ rpm */
  --cc-player-h: 72px;       /* mini-player escritorio; 56px en celular */
}

@media (max-width: 599px) {
  :root {
    --cc-display-xl: 88px; --cc-display-l: 64px; --cc-h1: 48px; --cc-h2: 34px; --cc-h3: 24px;
    --cc-body-l: 17px; --cc-section-y: 72px; --cc-gutter: 16px; --cc-margin: 16px;
    --cc-player-h: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --cc-dur-1: 0ms; --cc-dur-2: 0ms; --cc-dur-3: 0ms; }
}