/* ============================================================
   Hesabkhane Design System — Tokens (single source of truth)
   Light theme is authored on :root; Dark theme is derived.
   Theme is controlled by [data-theme="dark"|"light"] on <html>,
   with prefers-color-scheme as the system fallback.

   Legacy aliases (--bg, --surface, --accent, --hk-*, --color-*)
   point at the semantic tokens so existing stylesheets keep
   working during migration.
   ============================================================ */

:root {
  /* ─── Brand & primary ─────────────────────────── */
  --color-primary:        #2563eb;   /* trust / financial blue */
  --color-primary-hover:  #1d4ed8;
  --color-primary-active:  #1e40af;
  --color-primary-soft:   #eff6ff;
  --color-on-primary:     #ffffff;

  /* Brand surface (dark slate hero / nav / admin) */
  --color-brand:          #0f172a;
  --color-brand-2:        #1e3a5f;
  --color-on-brand:       #ffffff;

  /* ─── Roles ───────────────────────────────────── */
  --color-vip:            #7c3aed;
  --color-vip-soft:       #f5f3ff;
  --color-vip-text:       #6d28d9;

  --color-diamond:        #f59e0b;
  --color-diamond-soft:   #fffbeb;
  --color-diamond-text:   #b45309;

  /* ─── States ──────────────────────────────────── */
  --color-success:        #16a34a;
  --color-success-soft:   #f0fdf4;
  --color-success-border: #bbf7d0;
  --color-success-text:   #166534;

  --color-warning:        #d97706;
  --color-warning-soft:   #fffbeb;
  --color-warning-border: #fde68a;
  --color-warning-text:   #92400e;

  --color-error:          #dc2626;
  --color-error-soft:     #fef2f2;
  --color-error-border:   #fca5a5;
  --color-error-text:     #b91c1c;

  --color-info:           #0ea5e9;
  --color-info-soft:      #eff6ff;
  --color-info-border:    #bfdbfe;
  --color-info-text:      #1d4ed8;

  /* ─── Neutrals / surfaces ─────────────────────── */
  --color-bg:             #f8fafc;
  --color-surface:        #ffffff;
  --color-surface-2:      #f1f5f9;
  --color-surface-3:      #e9eef5;
  --color-border:         #e2e8f0;
  --color-border-strong:  #cbd5e1;

  /* ─── Text hierarchy ──────────────────────────── */
  --color-text-1:         #0f172a;  /* primary */
  --color-text-2:         #475569;  /* secondary */
  --color-text-3:         #94a3b8;  /* tertiary / muted */
  --color-text-inverse:   #f8fafc;

  /* ─── Overlays (adapt per theme) ──────────────── */
  --color-hover-overlay:  rgba(15, 23, 42, 0.05);
  --color-active-overlay: rgba(15, 23, 42, 0.08);
  --color-focus-ring:     rgba(37, 99, 235, 0.35);

  /* ─── Glass (header / bottom nav) ─────────────── */
  --glass-bg:             rgba(255, 255, 255, 0.72);
  --glass-border:         rgba(15, 23, 42, 0.06);

  /* ─── Typography ──────────────────────────────── */
  --font-sans: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs:   .72rem;
  --fs-sm:   .82rem;
  --fs-md:   .92rem;
  --fs-lg:   1.05rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.6rem;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   700;
  --fw-black:  800;

  /* ─── Spacing scale ───────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ─── Line heights ────────────────────────────── */
  --lh-tight:   1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.75;

  /* ─── Radius ──────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ─── Shadows ─────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 16px rgba(15,23,42,.08), 0 1px 4px rgba(15,23,42,.04);
  --shadow-lg: 0 12px 32px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06);

  /* ─── Layout ──────────────────────────────────── */
  --nav-h:        56px;
  --header-h:     var(--nav-h);
  --bottom-h:     52px;
  --bottom-safe:  env(safe-area-inset-bottom, 0px);
  --page-max:     1200px;
  --page-gutter:  var(--space-4);
  --page-gutter-wide: var(--space-5);
  --content-measure: 72rem;
  --control-min-block-size: 40px;
  --touch-target: 44px;
  --sidebar-w:         240px;
  --sidebar-w-compact: 64px;
  --transition:   .2s cubic-bezier(.4,0,.2,1);
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;

  /* ─── z-index ─────────────────────────────────── */
  --z-header: 900;
  --z-nav:    900;
  --z-modal:  1000;
  --z-toast:  1100;

  color-scheme: light;
}

/* ============================================================
   DARK THEME
   ============================================================ */
:root[data-theme="dark"] {
  --color-primary:        #3b82f6;
  --color-primary-hover:  #60a5fa;
  --color-primary-active: #2563eb;
  --color-primary-soft:   #172554;
  --color-on-primary:     #0b1120;

  --color-brand:          #1e293b;
  --color-brand-2:        #334155;
  --color-on-brand:       #f8fafc;

  --color-vip:            #a78bfa;
  --color-vip-soft:       #2e1065;
  --color-vip-text:       #ddd6fe;

  --color-diamond:        #fbbf24;
  --color-diamond-soft:   #422006;
  --color-diamond-text:   #fcd34d;

  --color-success:        #4ade80;
  --color-success-soft:   #052e16;
  --color-success-border: #166534;
  --color-success-text:   #86efac;

  --color-warning:        #fbbf24;
  --color-warning-soft:   #422006;
  --color-warning-border: #92400e;
  --color-warning-text:   #fcd34d;

  --color-error:          #f87171;
  --color-error-soft:     #450a0a;
  --color-error-border:   #991b1b;
  --color-error-text:     #fca5a5;

  --color-info:           #38bdf8;
  --color-info-soft:      #082f49;
  --color-info-border:    #0c4a6e;
  --color-info-text:      #7dd3fc;

  --color-bg:             #0b1120;
  --color-surface:        #111827;
  --color-surface-2:      #1e293b;
  --color-surface-3:      #273449;
  --color-border:         #334155;
  --color-border-strong:  #475569;

  --color-text-1:         #f1f5f9;
  --color-text-2:         #94a3b8;
  --color-text-3:         #64748b;
  --color-text-inverse:   #0f172a;

  --color-hover-overlay:  rgba(255, 255, 255, 0.06);
  --color-active-overlay: rgba(255, 255, 255, 0.10);
  --color-focus-ring:     rgba(96, 165, 250, 0.45);

  --glass-bg:             rgba(17, 24, 39, 0.72);
  --glass-border:         rgba(255, 255, 255, 0.08);

  --shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.3);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.35);

  color-scheme: dark;
}

/* System preference fallback when the user has not chosen explicitly */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --color-primary:        #3b82f6;
    --color-primary-hover:  #60a5fa;
    --color-primary-active: #2563eb;
    --color-primary-soft:   #172554;
    --color-on-primary:     #0b1120;
    --color-brand:          #1e293b;
    --color-brand-2:        #334155;
    --color-on-brand:       #f8fafc;
    --color-vip:            #a78bfa;
    --color-vip-soft:       #2e1065;
    --color-vip-text:       #ddd6fe;
    --color-diamond:        #fbbf24;
    --color-diamond-soft:   #422006;
    --color-diamond-text:   #fcd34d;
    --color-success:        #4ade80;
    --color-success-soft:   #052e16;
    --color-success-border: #166534;
    --color-success-text:   #86efac;
    --color-warning:        #fbbf24;
    --color-warning-soft:   #422006;
    --color-warning-border: #92400e;
    --color-warning-text:   #fcd34d;
    --color-error:          #f87171;
    --color-error-soft:     #450a0a;
    --color-error-border:   #991b1b;
    --color-error-text:     #fca5a5;
    --color-info:           #38bdf8;
    --color-info-soft:      #082f49;
    --color-info-border:    #0c4a6e;
    --color-info-text:      #7dd3fc;
    --color-bg:             #0b1120;
    --color-surface:        #111827;
    --color-surface-2:      #1e293b;
    --color-surface-3:      #273449;
    --color-border:         #334155;
    --color-border-strong:  #475569;
    --color-text-1:         #f1f5f9;
    --color-text-2:         #94a3b8;
    --color-text-3:         #64748b;
    --color-text-inverse:   #0f172a;
    --color-hover-overlay:  rgba(255, 255, 255, 0.06);
    --color-active-overlay: rgba(255, 255, 255, 0.10);
    --color-focus-ring:     rgba(96, 165, 250, 0.45);
    --glass-bg:             rgba(17, 24, 39, 0.72);
    --glass-border:         rgba(255, 255, 255, 0.08);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.3);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}

/* ============================================================
   LEGACY ALIASES — map old token names to the new semantic set
   so base.html, panel.css, dashboard.css, home.css, tools.css
   keep working unchanged.
   ============================================================ */
:root,
:root[data-theme="dark"] {
  /* base.html inline tokens */
  --bg:           var(--color-bg);
  --surface:      var(--color-surface);
  --surface-2:    var(--color-surface-2);
  --border:       var(--color-border);
  --text-1:       var(--color-text-1);
  --text-2:       var(--color-text-2);
  --text-3:       var(--color-text-3);
  --accent:       var(--color-brand);
  --accent-soft:  var(--color-surface-2);
  --gem:          var(--color-diamond);
  --danger:       var(--color-error);
  --danger-soft:  var(--color-error-soft);

  /* main.css EXT-04 legacy names */
  --color-danger:    var(--color-error);
  --spacing-xs:      var(--space-1);
  --spacing-sm:      var(--space-2);
  --spacing-md:      var(--space-4);
  --spacing-lg:      var(--space-5);
  --spacing-xl:      var(--space-6);
  --color-secondary: var(--color-primary);
  --color-accent:    var(--color-diamond);
  --color-market:    var(--color-brand-2);
  --color-tools:     var(--color-primary);
  --color-content:   var(--color-success);
  --color-account:   var(--color-text-2);
  --color-admin:     var(--color-error);
  --color-book:      var(--color-success);
  --color-article:   var(--color-primary);
  --color-podcast:   var(--color-vip);
  --color-pdf:       var(--color-error);
  --color-guide:     var(--color-diamond);

  /* design-system.css .tool-content tokens */
  --hk-font:          var(--font-sans);
  --hk-surface:       var(--color-surface);
  --hk-surface-2:     var(--color-surface-2);
  --hk-border:        var(--color-border);
  --hk-border-soft:   var(--color-border);
  --hk-text:          var(--color-text-1);
  --hk-text-muted:    var(--color-text-2);
  --hk-text-label:    var(--color-text-2);
  --hk-brand:         var(--color-brand);
  --hk-primary:       var(--color-primary);
  --hk-primary-soft:  var(--color-primary-soft);
  --hk-success-bg:    var(--color-success-soft);
  --hk-success-border:var(--color-success-border);
  --hk-success-text:  var(--color-success-text);
  --hk-danger:        var(--color-error);
  --hk-danger-soft:   var(--color-error-soft);
  --hk-radius-sm:     var(--radius-sm);
  --hk-radius-md:     var(--radius-md);
  --hk-radius-lg:     var(--radius-lg);
  --hk-radius-xl:     var(--radius-xl);
  --hk-shadow-sm:     var(--shadow-sm);
  --hk-shadow-md:     var(--shadow-md);
  --hk-shadow-card:   var(--shadow-md);
  --hk-transition:    var(--transition);
}