/* Design tokens · TeraServer ERP panel. Toda referencia de color/espaciado/tipografía
   en el resto del CSS usa estas variables por nombre -- nunca un hex/oklch suelto. */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-variable.woff2") format("woff2");
}

:root {
  /* --- Color: navy casi negro + cian eléctrico --- */
  --color-paper: oklch(16% 0.03 260);
  --color-paper-2: oklch(21% 0.035 260);
  --color-paper-3: oklch(26% 0.04 262);
  --color-ink: oklch(96% 0.01 250);
  --color-ink-2: oklch(72% 0.02 250);
  --color-accent: oklch(78% 0.16 210);
  --color-accent-2: oklch(62% 0.19 275);
  --color-positive: oklch(72% 0.17 160);
  --color-warning: oklch(80% 0.16 85);
  --color-danger: oklch(65% 0.20 25);

  /* Derivados: superficies translúcidas para glow / overlays, siempre a partir
     de los tokens base (nunca un color nuevo). */
  --color-accent-a12: oklch(78% 0.16 210 / 12%);
  --color-accent-a24: oklch(78% 0.16 210 / 24%);
  --color-accent-a45: oklch(78% 0.16 210 / 45%);
  --color-accent-2-a04: oklch(62% 0.19 275 / 4%);
  --color-danger-a16: oklch(65% 0.20 25 / 16%);
  --color-warning-a16: oklch(80% 0.16 85 / 16%);
  --color-positive-a16: oklch(72% 0.17 160 / 16%);
  --color-scrim: oklch(10% 0.02 260 / 60%);

  /* --- Espaciado: escala de 4pt --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;

  /* --- Tipografía --- */
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;

  --leading-tight: 1.15;
  --leading-normal: 1.5;

  /* --- Radios --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* --- Elevación / glow --- */
  --shadow-panel: 0 1px 0 0 oklch(100% 0 0 / 4%) inset, 0 12px 32px -12px oklch(8% 0.02 260 / 70%);
  --glow-accent: 0 0 0 1px var(--color-accent-a24), 0 0 24px 0 var(--color-accent-a12);

  /* --- Movimiento --- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* --- Layout --- */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 64px;
}