/* ============================================================
   SIOLA DESIGN SYSTEM — Colors & Typography Tokens v3.0
   Modern Fintech · Bilingual Arabic/English
   Dark & Light Theme · Electric Violet Primary
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');

/* ============================================================
   BASE COLOR PALETTE
   ============================================================ */
:root {
  /* Violet — Primary (action, brand, interactive) */
  --violet-50:   #F3F0FF;
  --violet-100:  #E9E3FF;
  --violet-200:  #D4C8FF;
  --violet-300:  #B49DFF;
  --violet-400:  #9370FF;
  --violet-500:  #7C3FFF;  /* PRIMARY */
  --violet-600:  #6B28F5;
  --violet-700:  #5618D4;
  --violet-800:  #4210A8;
  --violet-900:  #2E0B7A;
  --violet-950:  #1A0550;

  /* Cyan — Secondary (data, insights, verified) */
  --cyan-50:   #ECFEFF;
  --cyan-100:  #CFFAFE;
  --cyan-200:  #A5F3FC;
  --cyan-300:  #67E8F9;
  --cyan-400:  #22D3EE;
  --cyan-500:  #06B6D4;  /* SECONDARY */
  --cyan-600:  #0891B2;
  --cyan-700:  #0E7490;
  --cyan-800:  #155E75;
  --cyan-900:  #164E63;

  /* Slate neutrals */
  --slate-0:    #FFFFFF;
  --slate-50:   #F8FAFC;
  --slate-100:  #F1F5F9;
  --slate-200:  #E2E8F0;
  --slate-300:  #CBD5E1;
  --slate-400:  #94A3B8;
  --slate-500:  #64748B;
  --slate-600:  #475569;
  --slate-700:  #334155;
  --slate-800:  #1E293B;
  --slate-900:  #0F172A;
  --slate-950:  #080D18;

  /* Semantic */
  --red-400:    #F87171;
  --red-500:    #EF4444;
  --amber-400:  #FBBF24;
  --amber-500:  #F59E0B;
  --green-400:  #34D399;
  --green-500:  #10B981;
  --blue-400:   #60A5FA;
  --blue-500:   #3B82F6;

  /* ============================================================
     DARK THEME (default)
     ============================================================ */
  --bg-base:        #080D18;
  --bg-subtle:      #0D1424;
  --bg-muted:       #111B30;
  --bg-elevated:    #16213E;
  --bg-overlay:     #1C2A4E;

  --border-subtle:  rgba(255,255,255,0.05);
  --border-default: rgba(255,255,255,0.09);
  --border-strong:  rgba(255,255,255,0.16);
  --border-accent:  rgba(124,63,255,0.40);
  --border-accent-strong: rgba(124,63,255,0.70);

  --fg-primary:   #F0F4FF;
  --fg-secondary: #A8B4CC;
  --fg-muted:     #64748B;
  --fg-subtle:    #3A4560;
  --fg-inverse:   #080D18;

  --accent-primary:         var(--violet-500);
  --accent-primary-hover:   var(--violet-400);
  --accent-primary-press:   var(--violet-600);
  --accent-primary-subtle:  rgba(124,63,255,0.10);
  --accent-primary-border:  rgba(124,63,255,0.35);

  --accent-secondary:         var(--cyan-500);
  --accent-secondary-hover:   var(--cyan-400);
  --accent-secondary-subtle:  rgba(6,182,212,0.10);

  --status-success:         var(--green-500);
  --status-success-subtle:  rgba(16,185,129,0.10);
  --status-success-border:  rgba(16,185,129,0.30);

  --status-warning:         var(--amber-500);
  --status-warning-subtle:  rgba(245,158,11,0.10);
  --status-warning-border:  rgba(245,158,11,0.30);

  --status-error:           var(--red-500);
  --status-error-subtle:    rgba(239,68,68,0.10);
  --status-error-border:    rgba(239,68,68,0.30);

  --status-info:            var(--blue-400);
  --status-info-subtle:     rgba(96,165,250,0.10);
  --status-info-border:     rgba(96,165,250,0.30);

  /* Shadows */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.40);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.50);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.55);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.60);
  --shadow-xl:   0 20px 64px rgba(0,0,0,0.70);
  --shadow-focus: 0 0 0 3px rgba(124,63,255,0.35);
  --shadow-card:  0 0 0 1px rgba(255,255,255,0.05), 0 4px 24px rgba(0,0,0,0.50);

  /* Glow effects */
  --glow-violet: 0 0 32px rgba(124,63,255,0.20);
  --glow-cyan:   0 0 32px rgba(6,182,212,0.15);

  /* Glass */
  --glass-bg:     rgba(13,20,36,0.80);
  --glass-border: rgba(255,255,255,0.07);
  --glass-blur:   blur(20px);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: 'Syne', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-arabic:  'Noto Naskh Arabic', serif;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  --text-2xs: 0.625rem;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base:1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;

  --lh-none:    1.0;
  --lh-tight:   1.15;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --lh-arabic:  1.85;

  --ls-tighter: -0.04em;
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.02em;
  --ls-wider:   0.05em;
  --ls-caps:    0.08em;

  /* ============================================================
     SPACING
     ============================================================ */
  --sp-1:  4px;  --sp-2:  8px;   --sp-3: 12px;
  --sp-4: 16px;  --sp-5: 20px;   --sp-6: 24px;
  --sp-8: 32px;  --sp-10:40px;   --sp-12:48px;
  --sp-16:64px;  --sp-20:80px;   --sp-24:96px;

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --r-none: 0;      --r-xs: 4px;   --r-sm: 8px;
  --r-md:  12px;    --r-lg: 16px;  --r-xl: 24px;
  --r-2xl: 32px;    --r-full: 9999px;

  /* ============================================================
     ANIMATION
     ============================================================ */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.4, 1);

  --dur-fast:  140ms;
  --dur-base:  200ms;
  --dur-slow:  340ms;
  --dur-page:  480ms;
}

/* ============================================================
   LIGHT THEME OVERRIDES
   ============================================================ */
[data-theme="light"] {
  --bg-base:        #FAFBFF;
  --bg-subtle:      #F1F4FE;
  --bg-muted:       #E8EDFB;
  --bg-elevated:    #FFFFFF;
  --bg-overlay:     #FFFFFF;

  --border-subtle:  rgba(0,0,0,0.06);
  --border-default: rgba(0,0,0,0.10);
  --border-strong:  rgba(0,0,0,0.18);
  --border-accent:  rgba(108,40,245,0.30);
  --border-accent-strong: rgba(108,40,245,0.60);

  --fg-primary:   #0A0F1E;
  --fg-secondary: #334155;
  --fg-muted:     #64748B;
  --fg-subtle:    #94A3B8;
  --fg-inverse:   #F0F4FF;

  --accent-primary:         var(--violet-600);
  --accent-primary-hover:   var(--violet-500);
  --accent-primary-press:   var(--violet-700);
  --accent-primary-subtle:  rgba(108,40,245,0.08);
  --accent-primary-border:  rgba(108,40,245,0.25);

  --accent-secondary:        var(--cyan-600);
  --accent-secondary-hover:  var(--cyan-500);
  --accent-secondary-subtle: rgba(8,145,178,0.08);

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.12);
  --shadow-xl:  0 20px 64px rgba(0,0,0,0.15);
  --shadow-focus: 0 0 0 3px rgba(108,40,245,0.22);
  --shadow-card:  0 0 0 1px rgba(0,0,0,0.07), 0 2px 16px rgba(0,0,0,0.07);

  --glow-violet: 0 0 32px rgba(108,40,245,0.12);
  --glow-cyan:   0 0 32px rgba(8,145,178,0.10);

  --glass-bg:     rgba(255,255,255,0.85);
  --glass-border: rgba(0,0,0,0.07);
}

/* ============================================================
   BASE RESET + DEFAULTS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--bg-base);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--dur-base) var(--ease-smooth), color var(--dur-base) var(--ease-smooth);
}

[lang="ar"], [dir="rtl"] {
  font-family: var(--font-arabic);
  direction: rtl;
  line-height: var(--lh-arabic);
}

/* ============================================================
   TYPE CLASSES
   ============================================================ */
h1, .h1 { font-family:var(--font-display); font-size:var(--text-4xl); font-weight:var(--fw-bold); line-height:var(--lh-snug); letter-spacing:var(--ls-tight); color:var(--fg-primary); }
h2, .h2 { font-family:var(--font-display); font-size:var(--text-3xl); font-weight:var(--fw-bold); line-height:var(--lh-snug); letter-spacing:var(--ls-tight); color:var(--fg-primary); }
h3, .h3 { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:var(--fw-semibold); line-height:var(--lh-snug); color:var(--fg-primary); }
h4, .h4 { font-family:var(--font-body); font-size:var(--text-xl); font-weight:var(--fw-semibold); color:var(--fg-primary); }
h5, .h5 { font-family:var(--font-body); font-size:var(--text-lg); font-weight:var(--fw-semibold); color:var(--fg-primary); }
h6, .h6 { font-family:var(--font-body); font-size:var(--text-xs); font-weight:var(--fw-semibold); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--fg-muted); }

p { font-size:var(--text-base); line-height:var(--lh-relaxed); color:var(--fg-secondary); }
.label { font-size:var(--text-xs); font-weight:var(--fw-semibold); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--fg-muted); }
.caption { font-size:var(--text-2xs); color:var(--fg-subtle); }
.mono { font-family:var(--font-mono); }

.text-accent  { color: var(--accent-primary); }
.text-cyan    { color: var(--accent-secondary); }
.text-muted   { color: var(--fg-muted); }
.text-success { color: var(--green-400); }
.text-error   { color: var(--red-400); }

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, var(--violet-300) 0%, var(--violet-500) 50%, var(--cyan-400) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3 { font-family:var(--font-arabic); letter-spacing:0; }

a { color:var(--accent-primary); text-decoration:none; transition:color var(--dur-fast) var(--ease-smooth); }
a:hover { color:var(--accent-primary-hover); }
:focus-visible { outline:none; box-shadow:var(--shadow-focus); border-radius:var(--r-sm); }

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:var(--r-full); }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.surface-card {
  background: var(--bg-elevated);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
}
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}
.accent-gradient {
  background: linear-gradient(135deg, var(--violet-600), var(--violet-400), var(--cyan-500));
}