/**
 * Open API Theme Variables
 * ========================
 * Developer portal: Industrial/Utilitarian
 * Sidebar console layout, Indigo accent, Slate neutrals
 * Fonts: Geist + JetBrains Mono
 */

:root {
  /* ===========================================
     BRAND PALETTE — Indigo
     =========================================== */
  --oapi-indigo-900: #312e81;
  --oapi-indigo-800: #3730a3;
  --oapi-indigo-700: #4338ca;
  --oapi-indigo-600: #4f46e5;
  --oapi-indigo-500: #6366f1;
  --oapi-indigo-400: #818cf8;
  --oapi-indigo-300: #a5b4fc;
  --oapi-indigo-200: #c7d2fe;
  --oapi-indigo-100: #e0e7ff;
  --oapi-indigo-50:  #eef2ff;

  /* Neutrals — Slate */
  --oapi-slate-950: #020617;
  --oapi-slate-900: #0f172a;
  --oapi-slate-800: #1e293b;
  --oapi-slate-700: #334155;
  --oapi-slate-600: #475569;
  --oapi-slate-500: #64748b;
  --oapi-slate-400: #94a3b8;
  --oapi-slate-300: #cbd5e1;
  --oapi-slate-200: #e2e8f0;
  --oapi-slate-100: #f1f5f9;
  --oapi-slate-50:  #f8fafc;

  /* ===========================================
     UNIFIED TOKENS
     =========================================== */
  --color-primary: var(--oapi-indigo-600);
  --color-primary-dark: var(--oapi-indigo-700);
  --color-primary-light: var(--oapi-indigo-100);

  --color-text: var(--oapi-slate-800);
  --color-text-muted: var(--oapi-slate-500);
  --color-text-light: var(--oapi-slate-400);

  --color-bg: var(--oapi-slate-50);
  --color-bg-subtle: var(--oapi-slate-100);
  --color-bg-muted: var(--oapi-slate-200);
  --color-card: #ffffff;

  --color-border: var(--oapi-slate-200);
  --color-border-light: var(--oapi-slate-100);
  --color-border-dark: var(--oapi-slate-300);

  --color-success: #22c55e;
  --color-success-bg: #f0fdf4;
  --color-success-border: #86efac;
  --color-success-text: #15803d;

  --color-error: #ef4444;
  --color-error-bg: #fef2f2;
  --color-error-border: #fca5a5;
  --color-error-text: #b91c1c;

  --color-warning: #f59e0b;
  --color-warning-bg: #fffbeb;
  --color-warning-border: #fcd34d;
  --color-warning-text: #b45309;

  --color-info: #3b82f6;
  --color-info-bg: #eff6ff;
  --color-info-border: #93c5fd;
  --color-info-text: #1d4ed8;

  /* ===========================================
     TYPOGRAPHY
     =========================================== */
  --font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-heading: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* ===========================================
     LAYOUT
     =========================================== */
  --sidebar-width: 240px;
  --content-max-width: 1100px;

  /* ===========================================
     SIDEBAR THEME (dark)
     =========================================== */
  --sidebar-bg: var(--oapi-slate-900);
  --sidebar-text: #ffffff;
  --sidebar-divider: rgba(255, 255, 255, 0.08);
  --sidebar-link-color: var(--oapi-slate-400);
  --sidebar-link-hover-color: #ffffff;
  --sidebar-link-hover-bg: rgba(255, 255, 255, 0.05);
  --sidebar-link-active-color: #ffffff;
  --sidebar-link-active-bg: rgba(99, 102, 241, 0.15);

  /* ===========================================
     BUTTON THEME
     =========================================== */
  --btn-primary-bg: var(--oapi-indigo-600);
  --btn-primary-text: #ffffff;
  --btn-primary-hover-bg: var(--oapi-indigo-700);
  --btn-primary-border: var(--oapi-indigo-600);
  --btn-focus-ring: rgba(99, 102, 241, 0.3);

  --btn-secondary-bg: #ffffff;
  --btn-secondary-text: var(--oapi-slate-700);
  --btn-secondary-hover-bg: var(--oapi-slate-50);
  --btn-secondary-border: var(--oapi-slate-300);
  --btn-secondary-hover-border: var(--oapi-slate-400);

  /* ===========================================
     FORM THEME
     =========================================== */
  --form-label-color: var(--oapi-slate-700);
  --form-input-bg: #ffffff;
  --form-input-text: var(--oapi-slate-800);
  --form-input-border: var(--oapi-slate-300);
  --form-input-hover-border: var(--oapi-slate-400);
  --form-input-focus-border: var(--oapi-indigo-500);
  --form-input-focus-ring: rgba(99, 102, 241, 0.2);
  --form-placeholder: var(--oapi-slate-400);

  /* ===========================================
     TABLE THEME
     =========================================== */
  --table-bg: #ffffff;
  --table-border: var(--oapi-slate-200);
  --table-header-bg: var(--oapi-slate-50);
  --table-row-border: var(--oapi-slate-100);
  --table-stripe-bg: var(--oapi-slate-50);
  --table-hover-bg: var(--oapi-indigo-50);

  /* ===========================================
     CARD THEME
     =========================================== */
  --card-bg: #ffffff;
  --card-border: var(--oapi-slate-200);
  --card-divider: var(--oapi-slate-200);
  --card-footer-bg: var(--oapi-slate-50);
}

/* ===========================================
   DARK MODE
   =========================================== */
html.dark {
  --color-primary: #818cf8;
  --color-primary-dark: #a5b4fc;
  --color-primary-light: rgba(99, 102, 241, 0.15);

  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-text-light: #64748b;

  --color-bg: #020617;
  --color-bg-subtle: #0f172a;
  --color-bg-muted: #1e293b;
  --color-card: #0f172a;

  --color-border: #1e293b;
  --color-border-light: #0f172a;
  --color-border-dark: #334155;

  --color-success-bg: rgba(34, 197, 94, 0.1);
  --color-success-border: rgba(34, 197, 94, 0.3);
  --color-success-text: #4ade80;
  --color-error-bg: rgba(239, 68, 68, 0.1);
  --color-error-border: rgba(239, 68, 68, 0.3);
  --color-error-text: #f87171;
  --color-warning-bg: rgba(245, 158, 11, 0.1);
  --color-warning-border: rgba(245, 158, 11, 0.3);
  --color-warning-text: #fbbf24;
  --color-info-bg: rgba(59, 130, 246, 0.1);
  --color-info-border: rgba(59, 130, 246, 0.3);
  --color-info-text: #60a5fa;

  --sidebar-bg: #0a0f1a;

  --btn-primary-bg: #6366f1;
  --btn-primary-hover-bg: #4f46e5;
  --btn-secondary-bg: #1e293b;
  --btn-secondary-text: #e2e8f0;
  --btn-secondary-hover-bg: #334155;
  --btn-secondary-border: #334155;

  --form-label-color: #cbd5e1;
  --form-input-bg: #0f172a;
  --form-input-text: #e2e8f0;
  --form-input-border: #334155;
  --form-input-hover-border: #475569;
  --form-input-focus-border: #818cf8;
  --form-placeholder: #475569;

  --table-bg: #0f172a;
  --table-border: #1e293b;
  --table-header-bg: #020617;
  --table-row-border: #0f172a;
  --table-stripe-bg: #020617;
  --table-hover-bg: rgba(99, 102, 241, 0.08);

  --card-bg: #0f172a;
  --card-border: #1e293b;
  --card-divider: #1e293b;
  --card-footer-bg: #020617;
}