/* L.O.G.O.S — variables CSS derivadas de tokens.json (sistema de diseño
   https://claude.ai/artifact/6894bncmXHjZGKjp7zyS8B, versión 1793213586-a873).
   Si cambia tokens.json, se actualiza este archivo; nunca al revés.
   Solo la landing de logos-it-portfolio lo consume. Tema por defecto: Oscuro. */

:root {
  color-scheme: dark;

  /* Paleta de marca */
  --tinta: #0B0D12;
  --brasa: #FF5A1F;
  --ambar: #FFB347;
  --hueso: #F4F2EE;
  --arena: #E9E6E0;
  --superficie: #171A22;
  --grafito: #232733;
  --acero: #343A47;
  --niebla: #9AA2B1;
  --pizarra: #3F4553;
  --violeta-glow: #7C5CFF; /* solo logo premium y halos del hero, nunca UI */

  /* Semánticos — Oscuro */
  --bg: var(--tinta);
  --surface: var(--superficie);
  --text: var(--hueso);
  --text-muted: var(--niebla);
  --border: var(--grafito);
  --accent: var(--brasa);
  --on-accent: var(--tinta);
  --accent-text: var(--brasa);

  /* Tipografía */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --type-display-size: 96px; --type-display-leading: 0.95; --type-display-weight: 700; --type-display-tracking: -0.035em;
  --type-h1-size: 56px;      --type-h1-leading: 1.05;      --type-h1-weight: 700;      --type-h1-tracking: -0.03em;
  --type-h2-size: 40px;      --type-h2-leading: 1.1;       --type-h2-weight: 700;      --type-h2-tracking: -0.025em;
  --type-h3-size: 24px;      --type-h3-leading: 1.25;      --type-h3-weight: 700;      --type-h3-tracking: -0.015em;
  --type-body-size: 17px;    --type-body-leading: 1.6;     --type-body-weight: 400;
  --type-small-size: 14px;   --type-small-leading: 1.5;    --type-small-weight: 400;
  --type-label-size: 13px;   --type-label-leading: 1.4;    --type-label-weight: 500;   --type-label-tracking: 0.28em;
  --type-code-size: 15px;    --type-code-leading: 1.6;     --type-code-weight: 400;

  /* Espaciado (escala de 4 px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-10: 40px;
  --space-16: 64px;
  --space-24: 96px;

  /* Radios */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-key: 26px;

  /* Sombras */
  --glow-brasa: 0 0 24px rgba(255, 90, 31, 0.35);
}

/* Semánticos — Claro */
[data-theme="light"] {
  color-scheme: light;
  --bg: var(--hueso);
  --surface: #FFFFFF;
  --text: var(--tinta);
  --text-muted: var(--pizarra);
  --border: #D9D5CE;
  --accent: var(--brasa);
  --on-accent: var(--tinta);
  --accent-text: #C2410C;
}