/* ========== THEME SYSTEM ========== */

/* Theme Variables */
:root {
  /* Default Theme (Orchedule™) */
  --primary-color: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-darker: #1e40af;
  --secondary-color: #1a46b8;
  --secondary-light: #3b82f6;
  --accent-color: #3b82f6;
  --background-gradient-start: var(--surface-light);
  --background-gradient-end: var(--surface-medium);
  --navbar-gradient-start: #1d4ed8;
  --navbar-gradient-end: #1e40af;
  --card-background: #ffffff;
  --text-primary: #1f2937;
  --text-dark: #455475;
  --text-white: #ffffff;
  --text-contrast: #ffffff;
  /* Enhanced contrast for dark backgrounds */
  --light-bg: #ffffff;
  --light-bg-end: #ffffff;
  --border-color: #e2e8f0;
  --shadow-color: rgba(37, 99, 235, 0.1);
  --shadow-hover: rgba(37, 99, 235, 0.15);
  --btn-light-hover: #111827;
  --btn-secondary-bg: #6c757d;
  --btn-secondary-end: #5c636a;
  /* Contrast color for text on secondary buttons (tuned per theme) */
  --btn-secondary-contrast: #ffffff;
  --theme-name: "Orchedule™";

  /* Extended Color Variables - Matching Landing Page */
  --text-muted: #475569;
  --text-light: #64748b;
  --text-white: #ffffff;
  --surface-light: #f8fafc;
  --surface-medium: #f1f5f9;
  --surface-dark: #e5e7eb;
  --surface-color: #ffffff;
  --form-background: #ffffff;
  --input-focus-bg: #ffffff;
  --border-light: #f3f4f6;
  --error-light: #fef2f2;
  --error-dark: #dc2626;
  --success-color: #059669;
  --success-light: #d1fae5;
  --warning-color: #f59e0b;
  --warning-light: #fef3c7;
  --danger-color: #dc2626;
  --danger-light: #fecaca;
  --info-color: #0891b2;
  --info-light: #cffafe;
  --conflict-header-bg: #ffffff;
  --conflict-border: #e5e7eb;
  --table-border: #e5e7eb;
  --table-stripe: #ffffff;
  --form-bg-create: #ffffff;
  --form-bg-filter: #ffffff;
  --input-focus-border: var(--primary-color);
  --input-focus-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  --input-border-color: #cbd5e1;
  --btn-success-bg: var(--success-color);
  --btn-success-hover: #047857;
  --btn-warning-bg: var(--warning-color);
  --btn-warning-hover: #d97706;
  --btn-danger-bg: var(--danger-color);
  --btn-danger-hover: #b91c1c;

  /* ── Modern Design Tokens ────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 9999px;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Accessible focus ring */
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.45);
  --focus-ring-color: var(--primary-color);

  --font-sans: "Inter", "Cairo", "Segoe UI", "Roboto", system-ui, -apple-system, sans-serif;
  --font-display: "Playfair Display", "Cairo", Georgia, "Times New Roman", serif;

  /* App-shell spacing tokens (uniform gutters + navbar/content gap) */
  --shell-gutter: 8px;
  --shell-gap: 8px;

  /* Premium Brand Styling Variables (legacy compat) */
  --orchedule-shadow-sm: var(--shadow-sm);
  --orchedule-shadow-md: var(--shadow-md);
  --orchedule-shadow-lg: var(--shadow-lg);
  --orchedule-shadow-xl: var(--shadow-xl);

  /* Enhanced text visibility for Orchedule */
  --text-enhanced-contrast: #1f2937;
  --nav-text-contrast: #ffffff;
  --dropdown-text-enhanced: #1f2937;
  --sidebar-text-enhanced: #1f2937;
}

/* Emerald Theme */
[data-theme="sunset"] {
  /* Core brand */
  --primary-color: #059669;
  /* Emerald-600 */
  --primary-dark: #047857;
  /* Emerald-700 */
  --primary-darker: #065f46;
  /* Emerald-800 */
  --secondary-color: #34d399;
  /* Emerald-400 */
  --secondary-light: #6ee7b7;
  /* Emerald-300 */
  --accent-color: #10b981;
  /* Emerald-500 */

  /* Surfaces and layout — neutral light (emerald reserved for brand/accents) */
  --surface-light: #f8fafc;
  /* Slate-50 */
  --surface-medium: #f1f5f9;
  /* Slate-100 */
  --surface-dark: #e2e8f0;
  /* Slate-200 */
  --background-gradient-start: var(--surface-light);
  --background-gradient-end: var(--surface-medium);
  --card-background: #ffffff;
  --border-color: #e2e8f0;

  /* Text and contrast */
  --text-primary: #1F2937;
  /* Slate-800 */
  --text-dark: #111827;
  /* Slate-900 */
  --text-muted: #475569;
  /* Slate-600 */
  --text-light: #64748b;
  /* Slate-500 */
  --navbar-text-color: #ffffff;
  /* White on dark green navbar */
  --button-text-color: #ffffff;
  /* Colored buttons use white text */
  --icon-color: var(--primary-color);
  /* Emerald icons for body context */

  /* Navbar */
  --navbar-gradient-start: #047857;
  --navbar-gradient-end: #065f46;

  /* Lights */
  --light-bg: #ffffff;
  --light-bg-end: #ffffff;

  /* Feedback and accents */
  --success-color: #16A34A;
  --success-light: #DCFCE7;
  --warning-color: #F59E0B;
  --warning-light: #FEF3C7;
  --danger-color: #DC2626;
  --danger-light: #FECACA;
  --info-color: #0EA5E9;
  --info-light: #E0F2FE;

  /* Tables and forms */
  --conflict-header-bg: #ffffff;
  --conflict-border: var(--border-color);
  --table-border: #e5e7eb;
  --table-stripe: #ffffff;
  --form-bg-create: #ffffff;
  --form-bg-filter: #ffffff;
  --input-focus-border: var(--primary-color);
  --input-focus-shadow: 0 0 0 0.2rem rgba(5, 150, 105, 0.25);
  --input-border-color: #cbd5e1;

  /* Buttons */
  --btn-light-hover: #065f46;
  --btn-secondary-bg: #6c757d;
  --btn-secondary-end: #5c636a;
  --btn-secondary-contrast: #ffffff;
  --btn-success-bg: var(--success-color);
  --btn-success-hover: #15803D;
  --btn-warning-bg: var(--warning-color);
  --btn-warning-hover: #D97706;
  --btn-danger-bg: var(--danger-color);
  --btn-danger-hover: #B91C1C;

  /* Shadows */
  --shadow-color: rgba(5, 150, 105, 0.15);
  --shadow-hover: rgba(5, 150, 105, 0.25);

  --focus-ring: 0 0 0 3px rgba(5, 150, 105, 0.45);

  --theme-name: "Emerald";
}

/* Monochrome Theme - Clean professional black & white */
[data-theme="monochrome"] {
  --primary-color: #1f2937;
  --primary-dark: #111827;
  --primary-darker: #030712;
  --secondary-color: #4b5563;
  --secondary-light: #9ca3af;
  --accent-color: #374151;
  --background-gradient-start: var(--surface-light);
  --background-gradient-end: var(--surface-medium);
  --navbar-gradient-start: #1f2937;
  --navbar-gradient-end: #111827;
  --card-background: #ffffff;
  --text-primary: #111827;
  --text-dark: #000000;
  --text-white: #ffffff;
  --light-bg: #ffffff;
  --light-bg-end: #ffffff;
  --border-color: #d4d4d4;
  --shadow-color: rgba(0, 0, 0, 0.08);
  --shadow-hover: rgba(0, 0, 0, 0.15);
  --btn-light-hover: #000000;
  --btn-secondary-bg: #6b7280;
  --btn-secondary-end: #4b5563;
  --btn-secondary-contrast: #ffffff;
  --theme-name: "Monochrome";

  /* Extended Color Variables — greyscale palette */
  --text-muted: #4b5563;
  --text-light: #6b7280;
  --surface-light: #fafafa;
  --surface-medium: #f4f4f5;
  --surface-dark: #e4e4e7;
  --surface-color: #ffffff;
  --form-background: #ffffff;
  --input-focus-bg: #ffffff;
  --border-light: #ececec;
  --error-light: #fee2e2;
  --error-dark: #b91c1c;
  --success-color: #16a34a;
  --success-light: #dcfce7;
  --warning-color: #d97706;
  --warning-light: #fef3c7;
  --danger-color: #dc2626;
  --danger-light: #fee2e2;
  --info-color: #2563eb;
  --info-light: #dbeafe;
  --conflict-header-bg: #ffffff;
  --conflict-border: #e5e5e5;
  --table-border: #e5e5e5;
  --table-stripe: #ffffff;
  --form-bg-create: #ffffff;
  --form-bg-filter: #ffffff;
  --input-focus-border: var(--primary-color);
  --input-focus-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12);
  --input-border-color: #d4d4d4;
  --focus-ring: 0 0 0 3px rgba(17, 24, 39, 0.4);
  --btn-success-bg: var(--success-color);
  --btn-success-hover: #15803d;
  --btn-warning-bg: var(--warning-color);
  --btn-warning-hover: #b45309;
  --btn-danger-bg: var(--danger-color);
  --btn-danger-hover: #b91c1c;
}

/* Orchedule™ Theme - Official Company Brand Theme */
[data-theme="orchedule"] {
  --primary-color: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-darker: #1e40af;
  --secondary-color: #1e40af;
  --secondary-light: #3b82f6;
  --accent-color: #3b82f6;
  --background-gradient-start: var(--surface-light);
  --background-gradient-end: var(--surface-medium);
  --navbar-gradient-start: #1d4ed8;
  --navbar-gradient-end: #1e40af;
  --card-background: #ffffff;
  --text-primary: #1f2937;
  --text-dark: #111827;
  --light-bg: #ffffff;
  --light-bg-end: #ffffff;
  --border-color: #e2e8f0;
  --shadow-color: rgba(37, 99, 235, 0.08);
  --shadow-hover: rgba(37, 99, 235, 0.14);
  --btn-light-hover: #111827;
  /* Bootstrap-like secondary button */
  --btn-secondary-bg: #6c757d;
  /* Bootstrap secondary */
  --btn-secondary-end: #5c636a;
  /* Bootstrap secondary hover */
  --btn-secondary-contrast: #ffffff;
  --theme-name: "Orchedule™";

  /* Extended Color Variables - Matching Landing Page */
  --text-muted: #475569;
  --text-light: #64748b;
  --text-white: #ffffff;
  --surface-light: #f8fafc;
  --surface-medium: #f1f5f9;
  --surface-dark: #e5e7eb;
  --surface-color: #ffffff;
  --form-background: #ffffff;
  --input-focus-bg: #ffffff;
  --border-light: #f3f4f6;
  --error-light: #fef2f2;
  --error-dark: #dc2626;
  --success-color: #059669;
  --success-light: #d1fae5;
  --warning-color: #f59e0b;
  --warning-light: #fef3c7;
  --danger-color: #dc2626;
  --danger-light: #fecaca;
  --info-color: #0891b2;
  --info-light: #cffafe;
  --conflict-header-bg: #ffffff;
  --conflict-border: #e5e7eb;
  --table-border: #e5e7eb;
  --table-stripe: #ffffff;
  --form-bg-create: #ffffff;
  --form-bg-filter: #ffffff;
  --input-focus-border: var(--primary-color);
  --input-focus-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  --input-border-color: #cbd5e1;
  --btn-success-bg: var(--success-color);
  --btn-success-hover: #047857;
  --btn-warning-bg: var(--warning-color);
  --btn-warning-hover: #d97706;
  --btn-danger-bg: var(--danger-color);
  --btn-danger-hover: #b91c1c;
}