/*
 * CAESAR Design System — CSS Tokens
 * Fuente de verdad para Heaven, The Cube, MOSAIC y Genesis UI.
 * Generado desde workspace/design-system/tokens.js
 *
 * Usar --caesar-* en cualquier producto del ecosistema.
 * Heaven usa --bg, --cyan, etc. como aliases de estas variables.
 */

/* ── DARK MODE (default) ────────────────────────────────────── */
:root {
  /* Backgrounds */
  --caesar-bg:          #0a0f1a;
  --caesar-bg2:         #0d1520;
  --caesar-bg3:         #111d2e;
  --caesar-bg4:         #162033;
  --caesar-overlay:     rgba(10, 15, 26, 0.85);

  /* Cyan — accent principal */
  --caesar-cyan:        #00d4ff;
  --caesar-cyan2:       #00ff9f;
  --caesar-cyan-dim:    #0099bb;
  --caesar-cyan-glow:   rgba(0, 212, 255, 0.3);
  --caesar-cyan-glow-sm:rgba(0, 212, 255, 0.15);

  /* Text */
  --caesar-text:        #c8e8f0;
  --caesar-text2:       #6a9ab0;
  --caesar-text3:       #3a6070;
  --caesar-text-inv:    #0a0f1a;

  /* Borders */
  --caesar-border:      #1a3a4a;
  --caesar-border-glow: rgba(0, 212, 255, 0.3);

  /* Messages */
  --caesar-msg-out:     #003d4d;
  --caesar-msg-in:      #0d1f2d;
  --caesar-summary:     #051520;

  /* Glows / Shadows */
  --caesar-glow:        0 0 12px rgba(0, 212, 255, 0.4), 0 0 24px rgba(0, 212, 255, 0.15);
  --caesar-glow-sm:     0 0 6px rgba(0, 212, 255, 0.3);
  --caesar-shadow:      rgba(0, 0, 0, 0.5);

  /* Status */
  --caesar-success:     #00ff9f;
  --caesar-warning:     #ffa500;
  --caesar-error:       #ff4444;
  --caesar-critical:    #ff0066;

  /* Typography */
  --caesar-font-display:   'Rajdhani', system-ui, sans-serif;
  --caesar-font-mono:      'Share Tech Mono', 'Courier New', monospace;

  /* Spacing (escala 4px) */
  --caesar-space-1:  4px;
  --caesar-space-2:  8px;
  --caesar-space-3:  12px;
  --caesar-space-4:  16px;
  --caesar-space-5:  20px;
  --caesar-space-6:  24px;
  --caesar-space-8:  32px;
  --caesar-space-10: 40px;
  --caesar-space-12: 48px;

  /* Border radius */
  --caesar-radius-sm:   2px;
  --caesar-radius:      4px;
  --caesar-radius-md:   6px;
  --caesar-radius-lg:   8px;
  --caesar-radius-full: 9999px;

  /* Clip paths HUD */
  --caesar-clip-corner-br: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  --caesar-clip-corner-bl: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
  --caesar-clip-fab:        polygon(8% 0%, 100% 0%, 100% 92%, 92% 100%, 0% 100%, 0% 8%);
  --caesar-clip-hex:        polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

  /* Animation */
  --caesar-dur-fast:   120ms;
  --caesar-dur-base:   200ms;
  --caesar-dur-slow:   350ms;
  --caesar-ease:       ease;

  /* Layout */
  --caesar-sidebar-w:  340px;
  --caesar-header-h:   59px;
  --caesar-input-h:    40px;
}

/* ── LIGHT MODE ─────────────────────────────────────────────── */
[data-theme="light"] {
  --caesar-bg:          #f0f4f8;
  --caesar-bg2:         #ffffff;
  --caesar-bg3:         #e8f0f5;
  --caesar-bg4:         #dde8ef;
  --caesar-overlay:     rgba(240, 244, 248, 0.92);

  --caesar-cyan:        #0088aa;
  --caesar-cyan2:       #00aa77;
  --caesar-cyan-dim:    #006688;
  --caesar-cyan-glow:   rgba(0, 136, 170, 0.2);
  --caesar-cyan-glow-sm:rgba(0, 136, 170, 0.1);

  --caesar-text:        #0d2030;
  --caesar-text2:       #3a6070;
  --caesar-text3:       #7a9aaa;
  --caesar-text-inv:    #ffffff;

  --caesar-border:      #b0ccd8;
  --caesar-border-glow: rgba(0, 136, 170, 0.2);

  --caesar-msg-out:     #c8eef8;
  --caesar-msg-in:      #ffffff;
  --caesar-summary:     #e8f8ff;

  --caesar-glow:        0 2px 8px rgba(0, 136, 170, 0.2);
  --caesar-glow-sm:     0 1px 4px rgba(0, 136, 170, 0.15);
  --caesar-shadow:      rgba(0, 0, 0, 0.1);
}

/* ── HEAVEN ALIASES ─────────────────────────────────────────── */
/*
 * Heaven usa --bg, --cyan, etc. (sin prefijo caesar).
 * Estas aliases mapean el Design System a las variables legadas de Heaven.
 * Permite migración incremental sin romper el CSS existente.
 */
:root {
  --bg:          var(--caesar-bg);
  --bg2:         var(--caesar-bg2);
  --bg3:         var(--caesar-bg3);
  --bg4:         var(--caesar-bg4);
  --cyan:        var(--caesar-cyan);
  --cyan2:       var(--caesar-cyan2);
  --cyan-dim:    var(--caesar-cyan-dim);
  --border:      var(--caesar-border);
  --border-glow: var(--caesar-border-glow);
  --text:        var(--caesar-text);
  --text2:       var(--caesar-text2);
  --text3:       var(--caesar-text3);
  --msg-out:     var(--caesar-msg-out);
  --msg-in:      var(--caesar-msg-in);
  --accent:      var(--caesar-cyan);
  --send:        var(--caesar-cyan);
  --send-fg:     var(--caesar-text-inv);
  --glow:        var(--caesar-glow);
  --glow-sm:     var(--caesar-glow-sm);
  --scrollbar:   var(--caesar-border);
  --shadow:      var(--caesar-shadow);
  --toast:       var(--caesar-msg-in);
  --summary:     var(--caesar-summary);
}