/* ===========================================================
 * OPUS MUNDI - CSS Variables / Design Tokens
 * Core color palette and spacing for the dark cybernetic theme
 * =========================================================== */

:root {
  /* Background Layers */
  --om-bg-primary:    #141820;
  --om-bg-secondary:  #1a1f2e;
  --om-bg-panel:      rgba(255, 255, 255, 0.04);
  --om-bg-card:       rgba(255, 255, 255, 0.06);
  --om-bg-overlay:    rgba(20, 24, 32, 0.85);

  /* Brand Colors */
  --om-navy:          #1c3a5e;
  --om-navy-light:    #2a5080;
  --om-gold:          #a08c6e;
  --om-gold-light:    #c4aa85;
  --om-slate:         #8492a6;

  /* Accents */
  --om-cyan:          #00d4ff;
  --om-cyan-dim:      rgba(0, 212, 255, 0.15);
  --om-cyan-glow:     rgba(0, 212, 255, 0.4);
  --om-teal:          #00bfa5;
  --om-orcid-green:   #a6ce39;
  --om-orcid-green-b: #8ab32a;

  /* Text */
  --om-text-primary:  #e8edf5;
  --om-text-secondary:#8492a6;
  --om-text-muted:    #5a6478;
  --om-text-heading:  #ffffff;
  --om-text-accent:   #00d4ff;

  /* Borders */
  --om-border:        rgba(255, 255, 255, 0.08);
  --om-border-accent: rgba(0, 212, 255, 0.3);

  /* Shadow / Glow */
  --om-shadow-card:   0 8px 32px rgba(0, 0, 0, 0.4);
  --om-shadow-glow:   0 0 40px rgba(0, 212, 255, 0.15);
  --om-shadow-logo:   0 0 80px rgba(0, 212, 255, 0.25);

  /* Transitions */
  --om-transition:    0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --om-transition-fast: 0.15s ease;

  /* Typography */
  --om-font-sans:     'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --om-font-mono:     'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --om-font-display:  'Playfair Display', 'Georgia', serif;

  /* Spacing */
  --om-radius-sm:     4px;
  --om-radius-md:     8px;
  --om-radius-lg:     16px;
  --om-radius-xl:     24px;
}

/* ── LIGHT THEME VARIABLES ───────────────────────────────────────── */
html[data-theme="light"] {
  /* Background Layers */
  --om-bg-primary:    #f5f6fa;
  --om-bg-secondary:  #e8ecf4;
  --om-bg-panel:      rgba(0, 0, 0, 0.04);
  --om-bg-card:       rgba(255, 255, 255, 0.95);
  --om-bg-overlay:    rgba(255, 255, 255, 0.9);

  /* Brand Colors */
  --om-navy:          #1c3a5e;
  --om-navy-light:    #2a5080;
  --om-gold:          #b38b00;
  --om-gold-light:    #d4a600;
  --om-slate:         #6b778c;

  /* Accents */
  --om-cyan:          #b38b00; /* Cyan is remapped to Gold in light mode */
  --om-cyan-dim:      rgba(179, 139, 0, 0.15);
  --om-cyan-glow:     rgba(179, 139, 0, 0.25);
  --om-teal:          #008066;

  /* Text */
  --om-text-primary:  #1a1f2e;
  --om-text-secondary:#42526e;
  --om-text-muted:    #6b778c;
  --om-text-heading:  #0d1f2d;
  --om-text-accent:   #b38b00;

  /* Borders */
  --om-border:        rgba(13, 31, 45, 0.12);
  --om-border-accent: rgba(179, 139, 0, 0.3);

  /* Shadow / Glow */
  --om-shadow-card:   0 8px 30px rgba(0, 0, 0, 0.08);
  --om-shadow-glow:   0 0 30px rgba(179, 139, 0, 0.1);
  --om-shadow-logo:   0 0 50px rgba(179, 139, 0, 0.15);
}