/* ── EasyFile Design Tokens ── */
/* All values from SKILL 2.md — never hardcode, always reference var(--ef-*) */

:root {
  /* Typography */
  --ef-font: 'Inter', ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --ef-text-24: 24px;
  --ef-text-18: 18px;
  --ef-text-14: 14px;
  --ef-text-13: 13px;
  --ef-text-12: 12px;
  --ef-text-11: 11px;

  /* Spacing — only these 6 values */
  --ef-space-4: 4px;
  --ef-space-8: 8px;
  --ef-space-12: 12px;
  --ef-space-16: 16px;
  --ef-space-24: 24px;
  --ef-space-32: 32px;

  /* Primary */
  --ef-color-primary: #2563eb;
  --ef-color-primary-hover: #1d4ed8;
  --ef-color-primary-bg: rgba(37,99,235,0.08);
  --ef-color-primary-light: rgba(37,99,235,0.25);
  --ef-color-focus: rgba(37,99,235,0.4);

  /* Danger */
  --ef-color-danger: #dc2626;
  --ef-color-danger-hover: #b91c1c;

  /* Semantic — solid, bg tint (8%), text (one shade darker) */
  --ef-green: #16a34a;     --ef-green-bg: rgba(22,163,74,0.08);    --ef-green-text: #15803d;
  --ef-yellow: #d97706;    --ef-yellow-bg: rgba(217,119,6,0.08);   --ef-yellow-text: #b45309;
  --ef-red: #dc2626;       --ef-red-bg: rgba(220,38,38,0.08);      --ef-red-text: #b91c1c;
  --ef-blue: #2563eb;      --ef-blue-bg: rgba(37,99,235,0.08);     --ef-blue-text: #1d4ed8;

  /* Elevation */
  --ef-shadow-1: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --ef-shadow-2: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);

  /* Border Radius */
  --ef-radius-4: 4px;
  --ef-radius-6: 6px;
  --ef-radius-10: 10px;
  --ef-radius-14: 14px;
}

/* ── Light Theme (default) ── */
[data-theme="light"], :root {
  --ef-bg: #f8f9fb;
  --ef-surface: #ffffff;
  --ef-surface-2: #f1f3f5;
  --ef-text: #1e293b;
  --ef-text-muted: #64748b;
  --ef-border: #e2e8f0;
}

/* ── Dark Theme ── */
[data-theme="dark"] {
  --ef-bg: #0f172a;
  --ef-surface: #1e293b;
  --ef-surface-2: #253249;
  --ef-text: #e2e8f0;
  --ef-text-muted: #94a3b8;
  --ef-border: #334155;
}

/* ── Nav Theme: Light (default, LOB style) ── */
[data-nav="light"], :root {
  --nav-bg: #ffffff;
  --nav-bg-2: #f8f9fb;
  --nav-text: #64748b;
  --nav-text-active: #1e293b;
  --nav-hover: rgba(0,0,0,0.04);
  --nav-active-bg: var(--ef-color-primary-bg);
  --nav-active-text: var(--ef-color-primary);
  --nav-accent: var(--ef-color-primary);
  --nav-divider: #e2e8f0;
  --nav-border: #e2e8f0;
  --nav-brand: #1e293b;
  --header-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* ── Nav Theme: Soft Gray (ServiceNow / Dynamics) ── */
[data-nav="soft"] {
  --nav-bg: #f0f4f8;
  --nav-bg-2: #e8edf2;
  --nav-text: #64748b;
  --nav-text-active: #1e293b;
  --nav-hover: rgba(0,0,0,0.06);
  --nav-active-bg: var(--ef-color-primary-bg);
  --nav-active-text: var(--ef-color-primary);
  --nav-accent: var(--ef-color-primary);
  --nav-divider: #d4dce6;
  --nav-border: #d4dce6;
  --nav-brand: #1e293b;
  --header-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* ── Nav Theme: Slate (Azure Portal / GitHub) ── */
[data-nav="slate"] {
  --nav-bg: #1e293b;
  --nav-bg-2: #263448;
  --nav-text: #94a3b8;
  --nav-text-active: #e2e8f0;
  --nav-hover: rgba(255,255,255,0.06);
  --nav-active-bg: rgba(37,99,235,0.15);
  --nav-active-text: #60a5fa;
  --nav-accent: #60a5fa;
  --nav-divider: #334155;
  --nav-border: #334155;
  --nav-brand: #e2e8f0;
  --header-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ── Nav Theme: Dark (deep navy) ── */
[data-nav="dark"] {
  --nav-bg: #0f172a;
  --nav-bg-2: #162033;
  --nav-text: #94a3b8;
  --nav-text-active: #e2e8f0;
  --nav-hover: rgba(255,255,255,0.06);
  --nav-active-bg: rgba(37,99,235,0.15);
  --nav-active-text: #60a5fa;
  --nav-accent: #60a5fa;
  --nav-divider: #1e293b;
  --nav-border: #1e293b;
  --nav-brand: #e2e8f0;
  --header-shadow: 0 1px 3px rgba(0,0,0,0.3);
}