@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@300;400;500;600;700&family=Roboto+Condensed:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap');

:root {

  /* ================================================================
     FRONTEND VISUAL CONTRACT — Umbrella Records Terminal
     Tokens canonicos. Estos son los nombres que usaran todos los
     prompts siguientes.
     ================================================================ */

  /* --- Backgrounds --- */
  --bg-main:       #0D0F12;
  --bg-panel:      #1B2320;
  --bg-panel-dark: #111715;
  --bg-input:      #0D0F12;

  /* --- Borders --- */
  --border-muted:  rgba(107, 114, 120, 0.35);
  --border-strong: rgba(107, 114, 120, 0.6);

  /* --- Red scale — Umbrella Corporate (vino / industrial) --- */
  --red-main:   #6A2E35;
  --red-hover:  #7A343C;
  --red-dark:   #421C21;
  --red-border: #8A3A42;

  /* --- Hover alternativo --- */
  --brown-hover: #43312E;

  /* --- Text --- */
  --text-main:  #D8D6CF;
  --text-soft:  #B6B2AA;
  --text-muted: #7D8588;

  /* --- Status --- */
  --green-status:   #76A66A;
  --danger-status:  #C24A43;
  --warning-status: #C28A43;

  /* --- Shadow primitives (color, no full declaration) --- */
  --shadow-red:   rgba(106, 46, 53, 0.35);
  --shadow-black: rgba(0, 0, 0, 0.55);

  /* --- Radii --- */
  --radius-panel:  6px;
  --radius-card:   6px;
  --radius-button: 4px;
  --radius-input:  4px;
  --radius-badge:  3px;

  /* --- Fonts --- */
  --font-display: "Bebas Neue", "Oswald", "Roboto Condensed", "Arial Narrow", sans-serif;
  --font-body:    "Roboto Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-mono:    "Roboto Mono", "Courier New", monospace;

  /* ================================================================
     LEGACY ALIASES
     Mapean los nombres antiguos al contrato nuevo para que el CSS
     existente siga funcionando sin buscar y reemplazar manualmente.
     ================================================================ */
  --font-ui: var(--font-body);

  --color-bg-void:    var(--bg-main);
  --color-bg-base:    var(--bg-main);
  --color-bg-surface: var(--bg-panel);
  --color-bg-raised:  var(--bg-panel-dark);
  --color-bg-overlay: var(--bg-panel);

  --color-border-dim:    var(--border-muted);
  --color-border-base:   var(--border-muted);
  --color-border-strong: var(--border-strong);
  --color-border-focus:  var(--red-border);

  /* red scale aliases → valores del contrato */
  --color-red-900: var(--red-dark);
  --color-red-800: var(--red-dark);
  --color-red-700: var(--red-dark);
  --color-red-600: var(--red-main);
  --color-red-500: var(--red-main);
  --color-red-400: var(--red-hover);
  --color-red-300: var(--red-border);
  --color-red-200: var(--red-border);
  --color-red-100: var(--danger-status);

  --color-text-primary:   var(--text-main);
  --color-text-secondary: var(--text-soft);
  --color-text-muted:     var(--text-muted);
  --color-text-disabled:  #4a4a4a;
  --color-text-danger:    var(--danger-status);
  --color-text-inverse:   var(--bg-main);

  --color-status-active:   var(--green-status);
  --color-status-inactive: #3a3a3a;
  --color-status-danger:   var(--danger-status);
  --color-status-warning:  var(--warning-status);
  --color-status-info:     #1a3d5a;

  --radius-none: 0;
  --radius-xs:   var(--radius-input);

  /* ================================================================
     TYPOGRAPHY SCALE
     ================================================================ */
  --font-size-xs:   0.688rem;
  --font-size-sm:   0.75rem;
  --font-size-base: 0.875rem;
  --font-size-md:   1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.375rem;
  --font-size-2xl:  1.75rem;
  --font-size-3xl:  2.25rem;

  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --letter-spacing-tight:  -0.01em;
  --letter-spacing-normal:  0em;
  --letter-spacing-wide:    0.05em;
  --letter-spacing-wider:   0.08em;
  --letter-spacing-widest:  0.14em;

  --line-height-tight:   1.1;
  --line-height-snug:    1.25;
  --line-height-normal:  1.4;
  --line-height-relaxed: 1.6;

  /* ================================================================
     SPACING
     ================================================================ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ================================================================
     SHADOWS — compostos (--shadow-red y --shadow-black son colores,
     los siguientes son box-shadow completos listos para usar)
     ================================================================ */
  --shadow-sm:          0 1px 4px var(--shadow-black);
  --shadow-base:        0 2px 8px var(--shadow-black);
  --shadow-md:          0 4px 16px var(--shadow-black);
  --shadow-lg:          0 8px 32px var(--shadow-black);
  --shadow-red-glow:    0 0 10px var(--shadow-red);
  --shadow-red-glow-lg: 0 0 20px var(--shadow-red);
  --shadow-inset:       inset 0 1px 3px var(--shadow-black);

  /* ================================================================
     BORDER WIDTHS
     ================================================================ */
  --border-thin:  1px;
  --border-base:  1px;
  --border-thick: 2px;

  /* ================================================================
     TRANSITIONS
     ================================================================ */
  --transition-fast: 80ms ease;
  --transition-base: 160ms ease;
  --transition-slow: 300ms ease;

  /* ================================================================
     Z-INDEX
     ================================================================ */
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-scanlines: 9000;

  /* ================================================================
     LAYOUT
     ================================================================ */
  --sidebar-width:       240px;
  --content-max-width:   1200px;
  --header-height:       48px;
  --status-strip-height: 28px;

  /* ================================================================
     SCANLINES
     ================================================================ */
  --scanline-opacity: 0.05;
  --scanline-size:    4px;
}