@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,300&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  color-scheme: dark;

  /* Fondos */
  --color-bg-terminal: #0f0f0f;
  --color-bg-surface: #1a1a1a;
  --color-bg-key: #242424;
  --color-bg-key-hover: #2e2e2e;
  --color-bg-key-active: #3a3a3a;

  /* Coral — color de acción FichaAPI */
  --color-coral: #e85d30;
  --color-coral-hover: #d4522a;
  --color-coral-glow: rgba(232, 93, 48, 0.15);

  /* Texto */
  --color-text-primary: #f5f0e8;
  --color-text-secondary: #8a8680;
  --color-text-tertiary: #4a4845;
  --color-text-mono: #a8d4a0;

  /* Estados */
  --color-success: #4a9e6a;
  --color-success-bg: rgba(74, 158, 106, 0.12);
  --color-error: #c94040;
  --color-error-bg: rgba(201, 64, 64, 0.12);
  --color-warning: #c97c30;
  --color-warning-bg: rgba(201, 124, 48, 0.12);
  --color-online: #4a9e6a;
  --color-offline: #c94040;

  /* PIN dots */
  --color-pin-empty: transparent;
  --color-pin-filled: var(--color-coral);
  --color-pin-border: #3a3835;

  /* Tipografía */
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Espaciado base */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Radios */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Transiciones */
  --transition-fast: 100ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}