/*
 * 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:     #0b0f17;
  --tok-bg-raised:   #121826;
  --tok-bg-overlay:  #1a2233;
  --tok-bg-emphasis: #212b40;

  /* ── Text ── */
  --tok-text-primary:   #edf1f8;
  --tok-text-secondary: #a9b4cc;
  --tok-text-muted:     #7c8ba6;
  --tok-text-disabled:  #4d5877;

  /* ── Borders ── */
  --tok-border:        #26304a;
  --tok-border-strong: #344062;

  /* ── Accent – Mint (kept for semantic success only) ── */
  --tok-accent-mint:      #34d399;
  --tok-accent-mint-dim:  rgba(52, 211, 153, 0.15);
  --tok-accent-mint-text: #34d399;

  /* ── Accent – Brand blue (from the SobiDesk logo) ── */
  --tok-accent:      #6fa3e0;
  --tok-accent-dim:  rgba(111, 163, 224, 0.15);
  --tok-accent2:     #4f86d6;
  --tok-accent3:     #9cc4ee;

  /* ── Gradients ── */
  --tok-grad:      linear-gradient(135deg, #2955a3, #6fa3e0);
  --tok-grad-soft: linear-gradient(135deg, rgba(111,163,224,.18), rgba(79,134,214,.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-display: 'Inter', 'Vazirmatn', sans-serif;
  --tok-font-latin:   'Inter', 'Vazirmatn', 'Segoe UI', sans-serif;
  --tok-font-mono:    'JetBrains 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 — Trust Blue Pay palette ── */
  --tok-bg-base:     #f5f7fa;
  --tok-bg-raised:   #ffffff;
  --tok-bg-overlay:  #eef1f5;
  --tok-bg-emphasis: #e3e8ed;

  /* ── Text ── */
  --tok-text-primary:   #1a1a2e;
  --tok-text-secondary: #687173;
  --tok-text-muted:     #8b9297;
  --tok-text-disabled:  #cbd2d6;

  /* ── Borders ── */
  --tok-border:        #cbd2d6;
  --tok-border-strong: #8b9297;

  /* ── Accent – Mint (kept for semantic success only) ── */
  --tok-accent-mint:      #019c34;
  --tok-accent-mint-dim:  rgba(1, 156, 52, 0.12);
  --tok-accent-mint-text: #019c34;

  /* ── Accent – Brand blue (PayPal navy / light blue) ── */
  --tok-accent:     #003087;
  --tok-accent-dim: rgba(0, 48, 135, 0.12);
  --tok-accent2:    #009cde;
  --tok-accent3:    #4fb8ea;

  /* ── Gradients ── */
  --tok-grad:      linear-gradient(135deg, #003087, #009cde);
  --tok-grad-soft: linear-gradient(135deg, rgba(0,48,135,.10), rgba(0,156,222,.08));

  /* ── Status ── */
  --tok-success:     #019c34;
  --tok-success-dim: rgba(1, 156, 52, 0.10);
  --tok-warn:        #f5ba2e;
  --tok-warn-dim:    rgba(245, 186, 46, 0.14);
  --tok-danger:      #d20000;
  --tok-danger-dim:  rgba(210, 0, 0, 0.10);
  --tok-info:        #009cde;
  --tok-info-dim:    rgba(0, 156, 222, 0.10);

  /* ── Elevation (navy-tinted, per spec) ── */
  --tok-shadow-sm: 0 1px 4px rgba(0,48,135,.06);
  --tok-shadow-md: 0 4px 16px rgba(0,48,135,.10);
  --tok-shadow-lg: 0 12px 32px rgba(0,48,135,.14);
}

/* ────────────────────────────────────────────────────────
   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;
  }
}