/* ==========================================================================
   PMTS Color Theme Configuration
   Centralized color scheme for the entire project
   Update colors here to change them across all templates
   ========================================================================== */

:root {
  /* ========================================================================
     Primary Colors (Amber/Gold)
     ======================================================================== */
  --color-primary-50: #fffbeb;
  --color-primary-100: #fef3c7;
  --color-primary-200: #fde68a;
  --color-primary-300: #fcd34d;
  --color-primary-400: #fbbf24;
  --color-primary-500: #f59e0b;  /* Main primary color */
  --color-primary-600: #d97706;  /* Primary dark */
  --color-primary-700: #b45309;
  --color-primary-800: #92400e;
  --color-primary-900: #78350f;

  /* ========================================================================
     Background Colors (Slate/Dark)
     ======================================================================== */
  --color-bg-primary: #0f172a;      /* slate-900 - Main background */
  --color-bg-secondary: #1e293b;    /* slate-800 - Secondary background */
  --color-bg-tertiary: #334155;     /* slate-700 - Tertiary background */
  --color-bg-quaternary: #475569;   /* slate-600 - Quaternary background */
  --color-bg-surface: rgba(30, 41, 59, 0.7);  /* slate-800/70 - Card surface */
  --color-bg-surface-light: rgba(30, 41, 59, 0.5);  /* slate-800/50 - Light surface */
  --color-bg-input: rgba(15, 23, 42, 0.5);    /* slate-900/50 - Input background */

  /* ========================================================================
     Text Colors
     ======================================================================== */
  --color-text-primary: #ffffff;           /* white - Primary text */
  --color-text-secondary: #f8fafc;         /* slate-50 - Secondary text */
  --color-text-tertiary: #cbd5e1;          /* slate-300 - Tertiary text */
  --color-text-muted: #94a3b8;             /* slate-400 - Muted text */
  --color-text-disabled: #64748b;          /* slate-500 - Disabled text */
  --color-text-placeholder: #64748b;       /* slate-500 - Placeholder text */
  --color-text-primary-dark: #0f172a;
  --color-text-secondary-dark: #1e293b;
  --color-text-tertiary-dark: #334155;
  --color-text-muted-dark: #475569;
  --color-text-disabled-dark: #64748b;
  --color-text-placeholder-dark: #94a3b8;

  /* ========================================================================
     Border Colors
     ======================================================================== */
  --color-border-primary: rgba(71, 85, 105, 0.5);    /* slate-600/50 - Primary border */
  --color-border-secondary: rgba(51, 65, 85, 0.5);   /* slate-700/50 - Secondary border */
  --color-border-focus: rgba(245, 158, 11, 0.5);     /* amber-500/50 - Focus border */
  --color-border-hover: rgba(245, 158, 11, 0.3);    /* amber-500/30 - Hover border */

  /* ========================================================================
     Accent Colors
     ======================================================================== */
  /* Teal */
  --color-accent-teal-400: #2dd4bf;
  --color-accent-teal-500: #14b8a6;
  --color-accent-teal-bg: rgba(20, 184, 166, 0.1);  /* teal-500/10 */

  /* Blue */
  --color-accent-blue-400: #60a5fa;
  --color-accent-blue-500: #3b82f6;
  --color-accent-blue-bg: rgba(59, 130, 246, 0.1);   /* blue-500/10 */

  /* Purple */
  --color-accent-purple-400: #a78bfa;
  --color-accent-purple-500: #8b5cf6;
  --color-accent-purple-bg: rgba(139, 92, 246, 0.1); /* purple-500/10 */

  /* ========================================================================
     Status Colors
     ======================================================================== */
  /* Error/Red */
  --color-error-400: #f87171;
  --color-error-500: #ef4444;
  --color-error-bg: rgba(239, 68, 68, 0.1);          /* red-500/10 */
  --color-error-border: rgba(239, 68, 68, 0.3);      /* red-500/30 */

  /* Success/Green */
  --color-success-400: #4ade80;
  --color-success-500: #22c55e;
  --color-success-bg: rgba(34, 197, 94, 0.1);        /* green-500/10 */
  --color-success-border: rgba(34, 197, 94, 0.3);    /* green-500/30 */

  /* Warning/Yellow */
  --color-warning-400: #facc15;
  --color-warning-500: #eab308;
  --color-warning-bg: rgba(234, 179, 8, 0.1);       /* yellow-500/10 */
  --color-warning-border: rgba(234, 179, 8, 0.3);   /* yellow-500/30 */

  /* Info/Cyan */
  --color-info-400: #22d3ee;
  --color-info-500: #06b6d4;
  --color-info-bg: rgba(6, 182, 212, 0.1);          /* cyan-500/10 */
  --color-info-border: rgba(6, 182, 212, 0.3);      /* cyan-500/30 */

  /* ========================================================================
     Gradient Colors
     ======================================================================== */
  --gradient-primary: linear-gradient(to right, var(--color-primary-500), var(--color-primary-600));
  --gradient-primary-hover: linear-gradient(to right, var(--color-primary-600), var(--color-primary-700));
  --gradient-primary-text: linear-gradient(to right, var(--color-primary-400), var(--color-primary-600));
  --gradient-bg: linear-gradient(to bottom right, var(--color-bg-primary), var(--color-bg-secondary), var(--color-bg-primary));

  /* ========================================================================
     Shadow Colors
     ======================================================================== */
  --shadow-primary: 0 10px 15px -3px rgba(245, 158, 11, 0.25), 0 4px 6px -2px rgba(245, 158, 11, 0.1);
  --shadow-primary-lg: 0 20px 25px -5px rgba(245, 158, 11, 0.3), 0 10px 10px -5px rgba(245, 158, 11, 0.1);
  --shadow-card: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* ========================================================================
     Opacity Values
     ======================================================================== */
  --opacity-blob: 0.3;
  --opacity-grid: 0.05;
  --opacity-backdrop: 0.7;
  --opacity-surface: 0.5;
}

/* ==========================================================================
   Utility Classes for Easy Usage
   ========================================================================== */

/* Background Colors */
.bg-theme-primary { background-color: var(--color-bg-primary); }
.bg-theme-secondary { background-color: var(--color-bg-secondary); }
.bg-theme-tertiary { background-color: var(--color-bg-tertiary); }
.bg-theme-surface { background-color: var(--color-bg-surface); }
.bg-theme-input { background-color: var(--color-bg-input); }

/* Text Colors */
.text-theme-primary { color: var(--color-text-primary); }
.text-theme-secondary { color: var(--color-text-secondary); }
.text-theme-tertiary { color: var(--color-text-tertiary); }
.text-theme-muted { color: var(--color-text-muted); }
.text-theme-disabled { color: var(--color-text-disabled); }
.text-theme-primary-dark { color: var(--color-text-primary-dark); }
.text-theme-secondary-dark { color: var(--color-text-secondary-dark); }
.text-theme-tertiary-dark { color: var(--color-text-tertiary-dark); }
.text-theme-muted-dark { color: var(--color-text-muted-dark); }
.text-theme-disabled-dark { color: var(--color-text-disabled-dark); }
.text-theme-placeholder-dark { color: var(--color-text-placeholder-dark); }

/* Primary Accent Colors */
.bg-primary { background-color: var(--color-primary-500); }
.bg-primary-dark { background-color: var(--color-primary-600); }
.text-primary { color: var(--color-primary-500); }
.text-primary-dark { color: var(--color-primary-600); }
.border-primary { border-color: var(--color-primary-500); }

/* Border Colors */
.border-theme-primary { border-color: var(--color-border-primary); }
.border-theme-secondary { border-color: var(--color-border-secondary); }
.border-theme-focus { border-color: var(--color-border-focus); }

/* Gradient Backgrounds */
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-primary-hover { background: var(--gradient-primary-hover); }
.bg-gradient-primary-text { background: var(--gradient-primary-text); }
.bg-gradient-bg { background: var(--gradient-bg); }

/* Shadows */
.shadow-primary { box-shadow: var(--shadow-primary); }
.shadow-primary-lg { box-shadow: var(--shadow-primary-lg); }
.shadow-card { box-shadow: var(--shadow-card); }
.page-content > * { color: var(--color-text-primary-dark); }