/* variables.css - Global CSS Custom Properties for light & dark themes */

@font-face {
    font-family: 'saudi-riyal-claudion';
    src: url('./../fonts/Claudion.ttf') format('truetype');
}

:root {
  /* Malinsoft Brand Colors */
  --primary-color: #e9374e;
  --primary-hover: #cc2f44;
  --background-light: #f4f5fb;
  --text-dark: #1f2937;
  --text-light: #f9fafb;
  --text-muted: #6b7280;
  --border-color: #e5e7eb;

  /* Typography */
  --font-primary: 'saudi-riyal-claudion', 'Inter', system-ui, -apple-system, sans-serif;
  --font-arabic: 'saudi-riyal-claudion', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif;

  --primary-gradient: linear-gradient(to right, #e83749 0%, #457b9f 100%);
  --secondary-gradient: linear-gradient(to right, #6b7280 0%, #4b5563 100%);

  /* Extended semantic tokens for website solution */
  --gradient-primary-alt: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-success-alt: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
  --gradient-danger-alt: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  --bg-dark-alt: #0f0f23;
  --metric-green: #4ade80;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --secondary-color-alt: #6c757d;

  /* Light theme variables */
  --bg-color: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-secondary-alt: #edf2f7;
  --text-color: #1f2937;
  --text-secondary: #6b7280;
  --text-secondary-alt: #4b5563;
  --card-bg: #ffffff;
  --border: #e5e7eb;
  --navbar-bg: #ffffff;
  --navbar-shadow: rgba(0, 0, 0, 0.1);

  /* Shadow and overlay colors */
  --shadow-light: rgba(0, 0, 0, 0.08);
  --shadow-medium: rgba(0, 0, 0, 0.12);
  --shadow-heavy: rgba(0, 0, 0, 0.15);
  --shadow-primary: rgba(233, 55, 78, 0.3);
  --shadow-primary-hover: rgba(233, 55, 78, 0.5);
  --overlay-light: rgba(255, 255, 255, 0.95);
  --overlay-medium: rgba(255, 255, 255, 0.2);
  --shimmer: rgba(255, 255, 255, 0.2);

  /* Status colors */
  --success-bg: rgba(72, 187, 120, 0.1);
  --success-border: rgba(72, 187, 120, 0.3);
  --success-color: #68d391;
  --error-bg: rgba(245, 101, 101, 0.1);
  --error-border: rgba(245, 101, 101, 0.3);
  --error-color: #fc8181;

  /* Focus colors */
  --focus-shadow: rgba(233, 55, 78, 0.25);

  --hero-overlay-start: rgba(161, 140, 140, 0.35);
  --hero-overlay-end: rgba(165, 175, 196, 0.45);
  --hero-overlay-mid-1: rgba(26,26,26,0.35);
  --hero-overlay-mid-2: rgba(0,0,0,0.45);

  /* Animation timing (consumed by animations & interactive states) */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.3s;
  --duration-normal: 0.6s;
  --duration-slow: 0.9s;
}

/* Dark theme variables */
[data-theme="dark"] {
  /* Malinsoft brand colors */
  --primary-color: #e9374e;
  --primary-hover: #ff4d5a;
  --background-light: #1a1a1a;
  --text-dark: #f9fafb;
  --text-light: #1f2937;
  --text-muted: #9ca3af;
  --border-color: #374151;

  --bg-color: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-secondary-alt: #3a3a3a;
  --text-color: #ffffff;
  --text-secondary: #b0b0b0;
  --text-secondary-alt: #d1d5db;
  --card-bg: #2d2d2d;
  --border: #404040;
  --navbar-bg: #1a1a1a;
  --navbar-shadow: rgba(255, 255, 255, 0.1);
  --background-light: #2d2d2d;

  /* Extended semantic tokens for website solution */
  --gradient-primary-alt: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-success-alt: linear-gradient(135deg, #56ab2f 0%, #3f524b 100%);
  --gradient-danger-alt: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  --bg-dark-alt: #0f0f23;
  --metric-green: #4ade80;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --secondary-color-alt: #6c757d;

  /* Dark theme shadows and overlays */
  --shadow-light: rgba(0, 0, 0, 0.3);
  --shadow-medium: rgba(0, 0, 0, 0.4);
  --shadow-heavy: rgba(0, 0, 0, 0.5);
  --shadow-primary: rgba(233, 55, 78, 0.4);
  --shadow-primary-hover: rgba(233, 55, 78, 0.6);
  --overlay-light: rgba(26, 26, 26, 0.95);
  --overlay-medium: rgba(255, 255, 255, 0.1);
  --shimmer: rgba(255, 255, 255, 0.1);

  /* Dark theme focus */
  --focus-shadow: rgba(233, 55, 78, 0.4);

  --hero-overlay-start: rgba(158, 72, 72, 0.35);
  --hero-overlay-end: rgba(86, 93, 192, 0.45);
  --hero-overlay-mid-1: rgba(26,26,26,0.35);
  --hero-overlay-mid-2: rgba(0,0,0,0.45);
}