/**
 * ==============================================================================
 * Pak2Source — Global Design Tokens & Theme Configuration
 * ==============================================================================
 * SINGLE SOURCE OF TRUTH:
 * To change the brand primary color globally across the entire website,
 * update ONLY the --color-primary and --color-primary-rgb variables in :root!
 * ==============================================================================
 */

:root {
  /* ==========================================================================
     GLOBAL PRIMARY COLOR (SINGLE SOURCE OF TRUTH)
     ========================================================================== */
  --color-primary: #B374E0;            /* Primary Brand Color */
  --color-primary-rgb: 179, 116, 224;   /* RGB components for rgba overlays */
  --color-primary-light: #c993ee;       /* Lighter shade for hover & gradient */
  --color-primary-dark: #8a45b8;        /* Deeper shade for gradients */

  /* Derived Primary Tokens */
  --color-primary-hover: var(--color-primary-light);
  --color-primary-glow: rgba(var(--color-primary-rgb), 0.45);

  --color-secondary: #09090b;
  --color-secondary-hover: #18181b;
  --color-secondary-glow: rgba(var(--color-primary-rgb), 0.15);

  --color-accent: var(--color-primary);
  --color-accent-hover: var(--color-primary-light);
  --color-accent-glow: rgba(var(--color-primary-rgb), 0.45);

  --color-success: var(--color-primary);
  --color-success-hover: var(--color-primary-light);
  --color-success-glow: rgba(var(--color-primary-rgb), 0.25);

  --color-warning: var(--color-primary);
  --color-danger: var(--color-primary);

  /* --- Default Theme: Dark Palette (Deep Obsidian Black + White Typography) --- */
  --color-bg: #09090b;               /* Deep Obsidian Black */
  --color-bg-secondary: #121215;     /* Charcoal Black Surface */
  --color-surface: #18181b;          /* Elevated Surface (zinc-900) */
  --color-surface-card: #141418;     /* Card Container */
  --color-surface-hover: #212126;    /* Interactive Hover */
  --color-surface-glass: rgba(9, 9, 11, 0.94);

  --color-text: #ffffff;             /* Crisp Pure White Typography */
  --color-text-secondary: #e4e4e7;   /* Refined Light Grey (zinc-200) */
  --color-text-muted: #a1a1aa;       /* Slate Grey (zinc-400) */

  --color-border: #27272a;           /* Refined Dark Grey Border */
  --color-border-hover: var(--color-primary);
  --color-border-active: var(--color-primary-light);

  /* --- Gradients --- */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-secondary: linear-gradient(135deg, #18181b 0%, #27272a 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  --gradient-zatca: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  --gradient-hero-badge: linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.22) 0%, rgba(var(--color-primary-rgb), 0.05) 100%);
  --gradient-card-top: linear-gradient(90deg, var(--color-primary), #ffffff);

  /* --- Elevation & Shadows --- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 22px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 16px 42px rgba(0, 0, 0, 0.75);
  --shadow-glow-accent: 0 0 24px rgba(var(--color-primary-rgb), 0.35);
  --shadow-glow-primary: 0 0 24px rgba(var(--color-primary-rgb), 0.45);
  --shadow-glow-success: 0 0 20px rgba(var(--color-primary-rgb), 0.3);

  /* --- Typography --- */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* --- Radii & Transitions --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 9999px;

  --transition-fast: 160ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 280ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 450ms cubic-bezier(0.16, 1, 0.3, 1);

  --container-max-width: 1280px;
  --navbar-height: 120px;
}

/* ==============================================================================
   Explicit Dark Theme
   ============================================================================== */
[data-theme="dark"] {
  --color-bg: #09090b;
  --color-bg-secondary: #121215;
  --color-surface: #18181b;
  --color-surface-card: #141418;
  --color-surface-hover: #212126;
  --color-surface-glass: rgba(9, 9, 11, 0.94);

  --color-text: #ffffff;
  --color-text-secondary: #e4e4e7;
  --color-text-muted: #a1a1aa;

  --color-border: #27272a;
  --color-border-hover: var(--color-primary);
  --color-border-active: var(--color-primary-light);

  --gradient-card-top: linear-gradient(90deg, var(--color-primary), #ffffff);
}

/* ==============================================================================
   Light Theme (High-Contrast Clean Alternative)
   ============================================================================== */
[data-theme="light"] {
  --color-primary: #7e22ce;             /* Rich high-contrast royal purple for light background */
  --color-primary-rgb: 126, 34, 206;
  --color-primary-light: #9333ea;
  --color-primary-dark: #581c87;

  --color-primary-hover: var(--color-primary-dark);
  --color-primary-glow: rgba(var(--color-primary-rgb), 0.22);

  --color-secondary: #09090b;
  --color-secondary-hover: #27272a;
  --color-secondary-glow: rgba(0, 0, 0, 0.1);

  --color-bg: #ffffff;
  --color-bg-secondary: #f4f4f5;
  --color-surface: #ffffff;
  --color-surface-card: #ffffff;
  --color-surface-hover: #fafafa;
  --color-surface-glass: rgba(255, 255, 255, 0.94);

  --color-text: #09090b;
  --color-text-secondary: #3f3f46;      /* zinc-700: deep contrast for paragraphs */
  --color-text-muted: #52525b;          /* zinc-600: clear, readable captions */

  --color-border: #e4e4e7;
  --color-border-hover: var(--color-primary);
  --color-border-active: var(--color-primary);

  --gradient-primary: linear-gradient(135deg, #7e22ce 0%, #581c87 100%);
  --gradient-accent: linear-gradient(135deg, #7e22ce 0%, #9333ea 100%);
  --gradient-zatca: linear-gradient(135deg, #7e22ce 0%, #9333ea 100%);
  --gradient-card-top: linear-gradient(90deg, var(--color-primary), #09090b);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.1);
}

/* --- Brand Specific Components & Accents --- */
.btn-primary,
.btn-zatca {
  background: var(--gradient-primary);
  color: #ffffff !important;
  font-weight: 800;
  box-shadow: 0 4px 20px var(--color-primary-glow);
}

.btn-primary:hover,
.btn-zatca:hover {
  background: var(--color-primary-hover);
  color: #ffffff !important;
  box-shadow: 0 6px 28px var(--color-primary-glow);
}

.badge-highlight {
  background: var(--color-primary);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.top-announcement-bar {
  background: #09090b;
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.4);
  color: #ffffff;
}

.announcement-call-link {
  background: rgba(var(--color-primary-rgb), 0.25);
  border: 1px solid rgba(var(--color-primary-rgb), 0.6);
  color: #ffffff;
}

.announcement-call-link:hover {
  background: var(--color-primary);
  color: #ffffff;
}

.fbr-stamp-pill,
.zatca-stamp-pill {
  background: var(--color-primary);
  color: #ffffff;
}

.phone-action-chip:hover {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}

/* ==============================================================================
   Light Theme Explicit Component Readability Overrides
   Ensures zero white-on-white text collisions in light mode
   ============================================================================== */
[data-theme="light"] .btn-secondary {
  background: #ffffff;
  color: #09090b !important;
  border: 1px solid #d4d4d8;
}

[data-theme="light"] .btn-secondary:hover {
  background: #f4f4f5;
  color: var(--color-primary) !important;
  border-color: var(--color-primary);
}

[data-theme="light"] .btn-secondary span {
  color: inherit !important;
}

[data-theme="light"] .dashboard-status-tag {
  background: rgba(var(--color-primary-rgb), 0.12);
  border: 1px solid rgba(var(--color-primary-rgb), 0.4);
  color: var(--color-primary) !important;
  font-weight: 800;
}

[data-theme="light"] .compliance-hero-badge {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.08) 0%, rgba(244, 244, 245, 0.95) 100%);
  border: 1px solid rgba(var(--color-primary-rgb), 0.3);
}

[data-theme="light"] .compliance-hero-badge .compliance-item {
  color: #09090b !important;
  font-weight: 700;
}

[data-theme="light"] .interactive-demo-card {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.08) 0%, #ffffff 100%);
  border: 1px solid rgba(var(--color-primary-rgb), 0.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}

[data-theme="light"] .interactive-demo-card .demo-text h3 {
  color: #09090b !important;
}

[data-theme="light"] .interactive-demo-card .demo-text p {
  color: #3f3f46 !important;
}

[data-theme="light"] .hero-eyebrow,
[data-theme="light"] .section-tag {
  background: rgba(var(--color-primary-rgb), 0.08);
  border-color: rgba(var(--color-primary-rgb), 0.35);
  color: var(--color-primary) !important;
}

[data-theme="light"] .fbr-stamp-pill,
[data-theme="light"] .zatca-stamp-pill {
  background: var(--color-primary);
  color: #ffffff !important;
}

[data-theme="light"] .badge-highlight {
  background: var(--color-primary);
  color: #ffffff !important;
}

[data-theme="light"] .faq-accordion-item.active .faq-accordion-trigger,
[data-theme="light"] .faq-accordion-item.active .faq-question-text {
  color: var(--color-primary) !important;
  font-weight: 800;
}

[data-theme="light"] .contact-form input,
[data-theme="light"] .contact-form select,
[data-theme="light"] .contact-form textarea,
[data-theme="light"] .modal-form input,
[data-theme="light"] .modal-form select,
[data-theme="light"] .modal-form textarea {
  background: #ffffff;
  border-color: #d4d4d8;
  color: #09090b !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #71717a !important;
  opacity: 1;
}

[data-theme="light"] select option {
  background-color: #ffffff;
  color: #09090b !important;
}

[data-theme="light"] .form-feedback-message.success {
  background: rgba(var(--color-primary-rgb), 0.08);
  border-color: var(--color-primary);
  color: var(--color-primary) !important;
}

[data-theme="light"] .form-feedback-message span {
  color: #27272a;
}

[data-theme="light"] .nav-link {
  color: #27272a;
}

[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active {
  color: var(--color-primary);
}

[data-theme="light"] .service-checkbox-card {
  background: #f4f4f5;
  border-color: #e4e4e7;
  color: #27272a;
}

[data-theme="light"] .service-checkbox-card:hover {
  background: #e4e4e7;
  color: #09090b;
}

[data-theme="light"] .service-checkbox-card:has(input:checked) {
  background: rgba(var(--color-primary-rgb), 0.1);
  border-color: var(--color-primary);
  color: #09090b;
}