/*
 * SobiDesk Design Tokens v1
 * Additive-only: these vars coexist with legacy vars in the <style> block.
 * Use --tok-* prefix to avoid collisions.
 */

/* ────────────────────────────────────────────────────────
   DARK MODE (default / :root)
──────────────────────────────────────────────────────── */
:root {

  /* ── Surfaces ── */
  --tok-bg-base:     #0f1117;
  --tok-bg-raised:   #1a1d27;
  --tok-bg-overlay:  #22263a;
  --tok-bg-emphasis: #2a2f45;

  /* ── Text ── */
  --tok-text-primary:   #e8e9f0;
  --tok-text-secondary: #9ea3c0;
  --tok-text-muted:     #838aa8;
  --tok-text-disabled:  #555b78;

  /* ── Borders ── */
  --tok-border:        #2e3350;
  --tok-border-strong: #4a5080;

  /* ── Accent – Mint (new primary active color) ── */
  --tok-accent-mint:      #34d399;
  --tok-accent-mint-dim:  rgba(52, 211, 153, 0.15);
  --tok-accent-mint-text: #34d399;

  /* ── Accent – Purple (legacy, preserved) ── */
  --tok-accent:      #6c63ff;
  --tok-accent-dim:  rgba(108, 99, 255, 0.15);
  --tok-accent2:     #a78bfa;
  --tok-accent3:     #38bdf8;

  /* ── Gradients ── */
  --tok-grad:      linear-gradient(135deg, #7c5cff, #22d3ee);
  --tok-grad-soft: linear-gradient(135deg, rgba(124,92,255,.18), rgba(34,211,238,.10));

  /* ── Status (overridden in light, but set here as baseline) ── */
  --tok-success:     #34d399;
  --tok-success-dim: rgba(52, 211, 153, 0.12);
  --tok-warn:        #fbbf24;
  --tok-warn-dim:    rgba(251, 191, 36, 0.12);
  --tok-danger:      #f87171;
  --tok-danger-dim:  rgba(248, 113, 113, 0.12);
  --tok-info:        #38bdf8;
  --tok-info-dim:    rgba(56, 189, 248, 0.12);

  /* ── Elevation / Shadow ── */
  --tok-shadow-sm: 0 2px 8px rgba(0,0,0,.20);
  --tok-shadow-md: 0 4px 24px rgba(0,0,0,.28);
  --tok-shadow-lg: 0 8px 40px rgba(0,0,0,.35);

  /* ── Border Radius ── */
  --tok-radius-xs:   4px;
  --tok-radius-sm:   6px;
  --tok-radius-md:   8px;
  --tok-radius-lg:  12px;
  --tok-radius-xl:  16px;
  --tok-radius-2xl: 20px;
  --tok-radius-pill: 9999px;

  /* ── Spacing (4-point scale) ── */
  --tok-space-1:  4px;
  --tok-space-2:  8px;
  --tok-space-3: 12px;
  --tok-space-4: 16px;
  --tok-space-5: 20px;
  --tok-space-6: 24px;
  --tok-space-8: 32px;
  --tok-space-10: 40px;
  --tok-space-12: 48px;
  --tok-space-16: 64px;

  /* ── Typography – Font Stacks ── */
  --tok-font-fa:    'Vazirmatn', sans-serif;
  --tok-font-latin: 'Geist', 'Segoe UI', sans-serif;
  --tok-font-mono:  'Geist Mono', ui-monospace, monospace;
  --tok-font-sans:  var(--tok-font-fa);

  /* ── Typography – Scale ── */
  --tok-text-2xs: 9px;
  --tok-text-xs:  10px;
  --tok-text-sm:  11px;
  --tok-text-base: 13px;
  --tok-text-md:  14px;
  --tok-text-lg:  16px;
  --tok-text-xl:  20px;
  --tok-text-2xl: 24px;
  --tok-text-3xl: 30px;

  /* ── Typography – Line Height ── */
  --tok-leading-tight:   1.35;
  --tok-leading-normal:  1.6;
  --tok-leading-relaxed: 1.75;

  /* ── Typography – Weight ── */
  --tok-weight-normal:  400;
  --tok-weight-medium:  500;
  --tok-weight-semibold: 600;
  --tok-weight-bold:    700;

  /* ── Layout ── */
  --tok-sidebar-w:   210px;
  --tok-topbar-h:    52px;
  --tok-detail-w:    300px;
  --tok-bnav-h:      56px;
  --tok-z-sidebar:   70;
  --tok-z-topbar:    50;
  --tok-z-modal:     200;
  --tok-z-cmd:       600;
  --tok-z-pin:       500;

  /* ── Transition ── */
  --tok-transition-fast: 120ms ease;
  --tok-transition-base: 180ms ease;
  --tok-transition-slow: 280ms ease;
}

/* ────────────────────────────────────────────────────────
   LIGHT MODE  [data-theme="light"]
   Wired up in Step 4; safe to define here in advance.
──────────────────────────────────────────────────────── */
[data-theme="light"] {

  /* ── Surfaces ── */
  --tok-bg-base:     #f5f6fa;
  --tok-bg-raised:   #ffffff;
  --tok-bg-overlay:  #eef0f8;
  --tok-bg-emphasis: #e2e5f5;

  /* ── Text ── */
  --tok-text-primary:   #1a1d2e;
  --tok-text-secondary: #4b5280;
  --tok-text-muted:     #5c628a;
  --tok-text-disabled:  #9ea3c0;

  /* ── Borders ── */
  --tok-border:        #d4d7ea;
  --tok-border-strong: #9ea3c0;

  /* ── Accent – Mint ── */
  --tok-accent-mint:      #059669;
  --tok-accent-mint-dim:  rgba(5, 150, 105, 0.12);
  --tok-accent-mint-text: #059669;

  /* ── Accent – Purple ── */
  --tok-accent:     #5b52e8;
  --tok-accent-dim: rgba(91, 82, 232, 0.12);
  --tok-accent2:    #7c6ff7;
  --tok-accent3:    #0ea5e9;

  /* ── Gradients ── */
  --tok-grad:      linear-gradient(135deg, #6d56f0, #0ea5e9);
  --tok-grad-soft: linear-gradient(135deg, rgba(109,86,240,.12), rgba(14,165,233,.08));

  /* ── Status ── */
  --tok-success:     #059669;
  --tok-success-dim: rgba(5, 150, 105, 0.10);
  --tok-warn:        #d97706;
  --tok-warn-dim:    rgba(217, 119, 6, 0.10);
  --tok-danger:      #dc2626;
  --tok-danger-dim:  rgba(220, 38, 38, 0.10);
  --tok-info:        #0ea5e9;
  --tok-info-dim:    rgba(14, 165, 233, 0.10);

  /* ── Elevation ── */
  --tok-shadow-sm: 0 2px 8px rgba(0,0,0,.07);
  --tok-shadow-md: 0 4px 20px rgba(0,0,0,.10);
  --tok-shadow-lg: 0 8px 32px rgba(0,0,0,.13);
}

/* ────────────────────────────────────────────────────────
   COMPONENT: THEME TOGGLE BUTTON
──────────────────────────────────────────────────────── */
.btn-tok-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--tok-border);
  border-radius: var(--tok-radius-md);
  background: var(--tok-bg-overlay);
  color: var(--tok-text-secondary);
  cursor: pointer;
  transition: background var(--tok-transition-fast), color var(--tok-transition-fast), border-color var(--tok-transition-fast);
  flex-shrink: 0;
  font-size: 15px;
}

.btn-tok-theme:hover {
  background: var(--tok-bg-emphasis);
  color: var(--tok-accent-mint);
  border-color: var(--tok-accent-mint);
}

.btn-tok-theme[aria-pressed="true"] {
  background: var(--tok-accent-mint-dim);
  color: var(--tok-accent-mint);
  border-color: var(--tok-accent-mint);
}

/* ────────────────────────────────────────────────────────
   COMPONENT: LANG SWITCHER
──────────────────────────────────────────────────────── */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--tok-bg-overlay);
  border: 1px solid var(--tok-border);
  border-radius: var(--tok-radius-md);
  padding: 3px;
  flex-shrink: 0;
}

.lang-sw-btn {
  padding: 3px 7px;
  border: none;
  background: none;
  color: var(--tok-text-muted);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--tok-font-latin);
  letter-spacing: 0.4px;
  border-radius: var(--tok-radius-sm);
  cursor: pointer;
  transition: background var(--tok-transition-fast), color var(--tok-transition-fast);
  line-height: 1.6;
  min-height: 0;
}

.lang-sw-btn:hover {
  color: var(--tok-text-primary);
  background: var(--tok-bg-emphasis);
}

.lang-sw-btn.active {
  background: var(--tok-accent-mint-dim);
  color: var(--tok-accent-mint);
}

/* ────────────────────────────────────────────────────────
   LANGUAGE-BASED FONT MAPPING
   sobi-i18n-font.js sets data-lang on <html> at boot.
──────────────────────────────────────────────────────── */
[data-lang="en"],
[data-lang="de"] {
  --tok-font-sans: var(--tok-font-latin);
}

/* ────────────────────────────────────────────────────────
   REDUCED MOTION
──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tok-transition-fast: 0ms;
    --tok-transition-base: 0ms;
    --tok-transition-slow: 0ms;
  }
}