/* ══════════════════════════════════════════════════════════════
   Madbout ERP — Design Tokens & CSS Variables
   Microsoft Design Constitution v3.0
   Supports: Light (default) + Dark theme
   ══════════════════════════════════════════════════════════════ */

/* ── LIGHT THEME (Default — Microsoft Design) ──────────────── */
:root {
  /* ── Primary Palette ─────────────────────────────────────── */
  --clr-bg:           #E1E1E1;
  --clr-bg-soft:      #D6D6D6;
  --clr-bg-card:      #FFFFFF;
  --clr-surface:      #F5F5F5;
  --clr-border:       rgba(0, 0, 0, 0.06);
  --clr-border-hover: rgba(0, 0, 0, 0.12);
  --clr-border-active:rgba(0, 0, 0, 0.2);

  --clr-primary:      #0078D4;
  --clr-primary-glow: rgba(0, 120, 212, 0.15);
  --clr-secondary:    #107C10;
  --clr-accent:       #D13438;
  --clr-warning:      #CA5010;
  --clr-cyan:         #0078D4;

  --clr-text:         #404040;
  --clr-text-muted:   #666666;
  --clr-text-dim:     #999999;
  --clr-heading:      #000000;

  /* ── Gradients ───────────────────────────────────────────── */
  --grad-hero:        linear-gradient(160deg, #E1E1E1 0%, #D1D1D1 50%, #E6E0EC 100%);
  --grad-primary:     linear-gradient(135deg, #0078D4, #005A9E);
  --grad-secondary:   linear-gradient(135deg, #107C10, #0E6B0E);
  --grad-card:        none;
  --grad-glass:       none;
  --grad-glow:        radial-gradient(ellipse 600px 400px at 50% 0%, rgba(0,120,212,0.06), transparent 70%);

  /* ── Typography ──────────────────────────────────────────── */
  --ff-heading:       'Tajawal', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-body:          'Tajawal', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-hero:          clamp(2.6rem, 5.5vw, 4.5rem);
  --fs-h2:            clamp(1.9rem, 4vw, 3rem);
  --fs-h3:            clamp(1.2rem, 2vw, 1.5rem);
  --fs-body:          1rem;
  --fs-body-lg:       1.125rem;
  --fs-small:         0.875rem;
  --fs-xs:            0.75rem;
  --fs-tag:           0.625rem;

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

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-xs:         0.25rem;
  --space-sm:         0.5rem;
  --space-md:         1rem;
  --space-lg:         1.5rem;
  --space-xl:         2rem;
  --space-2xl:        3rem;
  --space-3xl:        4rem;
  --space-4xl:        6rem;
  --space-section:    clamp(5rem, 10vw, 10rem);

  /* ── Border Radius (Squared — NOT pill) ──────────────────── */
  --radius-sm:        4px;
  --radius-md:        8px;
  --radius-lg:        12px;
  --radius-xl:        16px;
  --radius-2xl:       24px;
  --radius-pill:      9999px;

  /* ── Shadows (Minimal — depth from bg difference) ────────── */
  --shadow-sm:        none;
  --shadow-md:        0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg:        0 8px 24px rgba(0,0,0,0.08);
  --shadow-glow:      none;
  --shadow-card:      none;
  --shadow-btn-hover: 0 2px 8px rgba(0,120,212,0.15);

  /* ── Glassmorphism (replaced with solid cards) ───────────── */
  --glass-blur:       0px;
  --glass-bg:         #FFFFFF;
  --glass-border:     none;

  /* ── Transitions (Fluent Decelerate) ─────────────────────── */
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:   cubic-bezier(0.25, 1, 0.5, 1);
  --ease-smooth:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-decelerate:  cubic-bezier(0, 0, 0, 1);
  --ease-standard:    cubic-bezier(0.8, 0, 0.2, 1);
  --ease-out:         cubic-bezier(0, 0, 0.2, 1);
  --dur-instant:      100ms;
  --dur-fast:         150ms;
  --dur-normal:       250ms;
  --dur-slow:         350ms;
  --dur-reveal:       700ms;
  --dur-hero:         800ms;

  /* ── Layout ──────────────────────────────────────────────── */
  --max-width:        1280px;
  --max-width-wide:   1440px;
  --max-width-narrow: 800px;
  --header-h:         56px;
}

/* ── DARK THEME ────────────────────────────────────────────── */
[data-theme="dark"] {
  --clr-bg:           #1A1A1A;
  --clr-bg-soft:      #222222;
  --clr-bg-card:      #2A2A2A;
  --clr-surface:      #333333;
  --clr-border:       rgba(255, 255, 255, 0.08);
  --clr-border-hover: rgba(255, 255, 255, 0.15);
  --clr-border-active:rgba(255, 255, 255, 0.25);

  --clr-primary:      #4CA6E8;
  --clr-primary-glow: rgba(76, 166, 232, 0.2);

  --clr-text:         #CCCCCC;
  --clr-text-muted:   #999999;
  --clr-text-dim:     #777777;
  --clr-heading:      #FFFFFF;

  --grad-hero:        linear-gradient(160deg, #1A1A1A 0%, #222222 50%, #1E1828 100%);
  --grad-glow:        radial-gradient(ellipse 600px 400px at 50% 0%, rgba(76,166,232,0.08), transparent 70%);

  --shadow-md:        0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg:        0 8px 24px rgba(0,0,0,0.4);
  --shadow-btn-hover: 0 2px 8px rgba(76,166,232,0.3);

  --glass-bg:         #2A2A2A;
}