/**
 * KLKBAT Brand Colors & Design System — CSS Variables
 * Version: 1.0 | Orange dominant, violet secondary, use supporting colors sparingly.
 */

/* Language-specific fonts: Arabic (Cairo), English (Inter) */
[lang="ar"] { font-family: 'Cairo', sans-serif; }
[lang="en"] { font-family: 'Inter', sans-serif; }

:root {
  /* Design system tokens */
  --color-primary:        #ea3b06;
  --color-primary-hover:  #c73205;
  --color-primary-light:  #fde8e1;
  --color-secondary:       #8b5cf6;
  --color-secondary-hover: #7c3aed;
  --color-secondary-light: #ede9fe;
  --color-orange-soft:    #f97316;
  --color-orange-warm:    #f59e0b;
  --color-green:          #10b981;
  --color-red:            #ef4444;
  --color-black:          #030308;
  --color-bg:             #f9fafb;
  --color-surface:        #ffffff;
  --color-border:         #e5e7eb;
  --color-text:           #111827;
  --color-text-muted:     #4b5563;
  /* Dark section tokens */
  --dark-text-primary:   #ffffff;
  --dark-text-muted:     #9ca3af;
  --dark-border:         #1f2937;

  /* Aliases for existing CSS (public pages) */
  --primary:       var(--color-primary);
  --primary-dark:  var(--color-primary-hover);
  --primary-hover: var(--color-primary-hover);
  --primary-light: var(--color-primary-light);
  --primary-glow:  rgba(234, 59, 6, 0.2);
  --secondary:       var(--color-secondary);
  --secondary-hover: var(--color-secondary-hover);
  --secondary-light: var(--color-secondary-light);
  --secondary-glow:  rgba(139, 92, 246, 0.15);
  --accent:        var(--color-primary);
  --bg-dark:       var(--color-black);
  --bg-card:       #171412;
  --text-primary:  #ffffff;
  --text-secondary: var(--dark-text-muted);
  --border:        rgba(255, 255, 255, 0.06);
  --success:       var(--color-green);
  --warning:       var(--color-orange-warm);
  --danger:        var(--color-red);
}