/* ==============================================
   base.css – CSS Custom Properties (Variables)
   الثيم الافتراضي: داكن | Light theme via [data-theme="light"]
   ============================================== */

:root {
  /* Base Background Colors */
  --bg: #0B1220;
  --bg2: #0F1A2C;
  --panel: rgba(255, 255, 255, .06);
  --panel2: rgba(255, 255, 255, .08);
  --border: rgba(255, 255, 255, .12);
  --border2: rgba(255, 255, 255, .18);
  --glass-bg: rgba(15, 26, 44, .86);
  --glass-border: rgba(255, 255, 255, .12);

  /* Brand Colors - Primary: #2182DF (Blue) */
  --primary: #2182DF;
  --primary-light: #2182DF;
  --primary-dark: #2182DF;

  --accent: #2182DF;
  --accent-light: #2182DF;

  /* Gradient Combinations */
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-light));
  --gradient-accent: linear-gradient(135deg, var(--accent), var(--accent-light));
  --gradient-accent-vertical: linear-gradient(180deg, var(--accent), var(--accent-light));

  /* Text Colors */
  --text: #FFFFFF;
  --text-light: rgba(255, 255, 255, .96);
  --text-muted: rgba(255, 255, 255, .72);
  --text-muted2: rgba(255, 255, 255, .55);
  --text-disabled: rgba(255, 255, 255, .38);

  /* Secondary Color (Complementary Teal) */
  --secondary: #407B6E;
  --secondary-light: rgba(64, 123, 110, .30);
  --secondary-gradient: linear-gradient(135deg, rgba(64, 123, 110, .22), rgba(64, 123, 110, .10));
  --secondary-gradient-light: linear-gradient(135deg, rgba(64, 123, 110, .18), rgba(64, 123, 110, .10));
  --secondary-bg: rgba(64, 123, 110, .16);
  --secondary-border: rgba(64, 123, 110, .28);

  /* Primary Accent (Blue-based) */
  --primary-accent: #2182DF;
  --primary-accent-light: rgba(33, 130, 223, 0.75);
  --primary-accent-bg: rgba(33, 130, 223, 0.15);
  --primary-accent-border: rgba(33, 130, 223, 0.5);
  --primary-accent-gradient: linear-gradient(135deg, rgba(33, 130, 223, 0.22), rgba(33, 130, 223, 0.18));
  --primary-accent-shadow: rgba(33, 130, 223, 0.25);

  /* State/Interaction Colors */
  --hover-bg: rgba(255, 255, 255, .06);
  --hover-border: rgba(255, 255, 255, .16);
  --active-bg: rgba(255, 255, 255, .07);
  --focus-ring: rgba(33, 130, 223, 0.10);
  --focus-border: rgba(33, 130, 223, 0.35);

  /* Shadow Colors */
  --shadow-color: rgba(0, 0, 0, .35);
  --shadow-color-soft: rgba(0, 0, 0, .22);
  --shadow-color-light: rgba(0, 0, 0, .14);
  --shadow-primary: rgba(33, 130, 223, 0.22);
  --shadow-secondary: rgba(64, 123, 110, .10);

  /* Background Gradients */
  --bg-radial-secondary: radial-gradient(900px 460px at 80% -10%, rgba(64, 123, 110, .30), transparent 60%);
  --bg-radial-primary: radial-gradient(700px 420px at 15% 10%, rgba(33, 130, 223, 0.20), transparent 60%);
  --bg-linear: linear-gradient(180deg, var(--bg) 0%, #070B12 100%);

  /* Component Gradients */
  --section-gradient: linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .02) 100%);
  --panel-gradient: linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .05) 100%);
  --cta-gradient: linear-gradient(135deg, rgba(64, 123, 110, .34), rgba(0, 0, 0, .20), rgba(33, 130, 223, 0.18));
  --popular-plan-gradient: linear-gradient(180deg, rgba(33, 130, 223, 0.12) 0%, rgba(255, 255, 255, .05) 60%);
  --auth-side-gradient:
    radial-gradient(260px 260px at 20% 10%, rgba(33, 130, 223, 0.22), transparent 60%),
    radial-gradient(320px 320px at 90% 0%, rgba(64, 123, 110, .22), transparent 62%),
    rgba(255, 255, 255, .04);

  /* Radial Effects */
  --radial-secondary-large: radial-gradient(circle, rgba(64, 123, 110, .18), transparent 68%);
  --radial-primary-large: radial-gradient(circle, rgba(33, 130, 223, 0.14), transparent 68%);
  --radial-secondary-rotated: radial-gradient(circle, rgba(64, 123, 110, .24), transparent 65%);
  --radial-primary-popular: radial-gradient(circle, rgba(33, 130, 223, 0.20), transparent 65%);
  --radial-hero-glow:
    radial-gradient(closest-side, rgba(33, 130, 223, 0.18), transparent 70%),
    radial-gradient(closest-side, rgba(64, 123, 110, .18), transparent 70%);

  /* Bar/Progress Colors */
  --bar-bg: rgba(255, 255, 255, .10);
  --bar-fill: linear-gradient(90deg, var(--accent), var(--primary-accent-light));

  /* Effects */
  --shadow: 0 18px 50px var(--shadow-color);
  --shadow-soft: 0 14px 30px var(--shadow-color-soft);
  --shadow-light: 0 10px 22px var(--shadow-color-light);
  --radius: 16px;
  --radius-lg: 24px;
  --container: 1120px;
  --transition: all .28s cubic-bezier(.2, .8, .2, 1);
}

/* =============================================
   الثيم الفاتح — Light Theme (محسّن)
   يُفعَّل بوضع data-theme="light" على <html>
   ============================================= */
[data-theme="light"] {
  /* خلفيات */
  --bg:  #F4F6FB;
  --bg2: #EAF0F9;
  --panel:  rgba(0, 0, 0, .08);
  --panel2: rgba(0, 0, 0, .06);
  --border:  rgba(0, 0, 0, .12);
  --border2: rgba(0, 0, 0, .16);
  --glass-bg:     rgba(244, 246, 251, .90);
  --glass-border: rgba(0, 0, 0, .10);

  /* نصوص */
  --text:          #0D1520;
  --text-light:    rgba(13, 21, 32, .96);
  --text-muted:    rgba(13, 21, 32, .62);
  --text-muted2:   rgba(13, 21, 32, .55);
  --text-disabled: rgba(13, 21, 32, .32);

  /* التفاعل */
  --hover-bg:    rgba(0, 0, 0, .06);
  --hover-border: rgba(0, 0, 0, .12);
  --active-bg:   rgba(0, 0, 0, .05);

  /* ظلال */
  --shadow-color:       rgba(0, 0, 0, .12);
  --shadow-color-soft:  rgba(0, 0, 0, .08);
  --shadow-color-light: rgba(0, 0, 0, .06);

  /* خلفية الجسم */
  --bg-radial-secondary: radial-gradient(900px 460px at 80% -10%, rgba(64,123,110,.10), transparent 60%);
  --bg-radial-primary:   radial-gradient(700px 420px at 15% 10%, rgba(33,130,223,.10), transparent 60%);
  --bg-linear:           linear-gradient(180deg, #F4F6FB 0%, #E8EEF7 100%);

  /* ألوان الأقسام */
  --section-gradient: linear-gradient(180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.015) 100%);
  --panel-gradient:   linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.03) 100%);
  --cta-gradient:     linear-gradient(135deg, rgba(64,123,110,.18), rgba(255,255,255,.60), rgba(33,130,223,.12));
  --popular-plan-gradient: linear-gradient(180deg, rgba(33,130,223,.08) 0%, rgba(255,255,255,.05) 60%);
  --auth-side-gradient:
    radial-gradient(260px 260px at 20% 10%, rgba(33,130,223,.14), transparent 60%),
    radial-gradient(320px 320px at 90% 0%, rgba(64,123,110,.14), transparent 62%),
    rgba(0, 0, 0, .03);

  /* تأثيرات شعاعية */
  --radial-secondary-large:   radial-gradient(circle, rgba(64,123,110,.10), transparent 68%);
  --radial-primary-large:     radial-gradient(circle, rgba(33,130,223,.08), transparent 68%);
  --radial-secondary-rotated: radial-gradient(circle, rgba(64,123,110,.14), transparent 65%);
  --radial-primary-popular:   radial-gradient(circle, rgba(33,130,223,.12), transparent 65%);
  --radial-hero-glow:
    radial-gradient(closest-side, rgba(33,130,223,.10), transparent 70%),
    radial-gradient(closest-side, rgba(64,123,110,.10), transparent 70%);

  /* شريط التقدم */
  --bar-bg: rgba(0, 0, 0, .08);

  /* ظل موحد */
  --shadow:       0 18px 50px var(--shadow-color);
  --shadow-soft:  0 14px 30px var(--shadow-color-soft);
  --shadow-light: 0 10px 22px var(--shadow-color-light);

  --primary-dark: #1a6bb0;
}