/**
 * Design tokens. Every visual decision in the app should reference one of
 * these — colors, spacing, type, radius, shadow. To re-skin the entire app,
 * edit this file alone.
 */

:root {
  /* ── Brand & accent ──────────────────────────────────────── */
  --accent-50:  #eef2ff;
  --accent-100: #e0e7ff;
  --accent-200: #c7d2fe;
  --accent-300: #a5b4fc;
  --accent-400: #818cf8;
  --accent-500: #6366f1;   /* primary CTA */
  --accent-600: #4f46e5;   /* primary hover */
  --accent-700: #4338ca;
  --accent-soft: rgba(99, 102, 241, 0.08);
  --accent-ring: rgba(99, 102, 241, 0.18);

  /* ── Semantic ────────────────────────────────────────────── */
  --success-500: #10b981;
  --success-600: #059669;
  --warning-500: #f59e0b;
  --warning-bg:  #fef9ec;
  --warning-fg:  #92400e;
  --danger-500:  #ef4444;
  --danger-bg:   #fef2f2;

  /* ── Neutrals (slate scale, light mode) ──────────────────── */
  --slate-25:  #fcfcfd;
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* ── Surfaces ────────────────────────────────────────────── */
  --bg-app:        var(--slate-50);
  --bg-canvas:     #ffffff;
  --bg-subtle:     var(--slate-50);
  --bg-muted:      var(--slate-100);
  --bg-hover:      var(--slate-100);
  --bg-elevated:   #ffffff;

  /* Inverse surface (sidebar, header, modals' overlay) */
  --bg-inverse:        var(--slate-900);
  --bg-inverse-soft:   #1a253b;
  --fg-inverse:        #f8fafc;
  --fg-inverse-muted:  #cbd5e1;
  --fg-inverse-faint:  rgba(248, 250, 252, 0.6);

  /* ── Foreground ─────────────────────────────────────────── */
  --fg-strong:  var(--slate-900);
  --fg-default: var(--slate-700);
  --fg-muted:   var(--slate-500);
  --fg-faint:   var(--slate-400);

  /* ── Borders ────────────────────────────────────────────── */
  --border-subtle: var(--slate-200);
  --border-default: var(--slate-200);
  --border-strong:  var(--slate-300);
  --border-on-dark: rgba(255, 255, 255, 0.12);

  /* ── Type ───────────────────────────────────────────────── */
  --font-sans:
    'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   14.5px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;

  --leading-tight:  1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Spacing scale (4-pt grid) ──────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

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

  /* ── Shadows (subtle, layered) ──────────────────────────── */
  --shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 24px -8px rgba(15, 23, 42, 0.12), 0 4px 8px -2px rgba(15, 23, 42, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.18);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;

  /* ── Layout knobs ───────────────────────────────────────── */
  --shell-max-width: 1440px;
  --sidebar-width: 280px;
  --rail-width: 300px;       /* panel phải: Nguồn + Bài mẫu */
  --doc-panel-width: 300px;  /* alias cũ */
  --topbar-height: 60px;

  /* ── Focus ring (used on every interactive element) ─────── */
  --focus-ring: 0 0 0 3px var(--accent-ring);
}

/* Dark-mode opt-in: add class="dark" on <html> to flip surfaces. The token
   names stay identical so component CSS doesn't change. */
html.dark {
  --bg-app:      #0b1220;
  --bg-canvas:   #0f172a;
  --bg-subtle:   #111a2e;
  --bg-muted:    #182238;
  --bg-hover:    #1c2742;
  --bg-elevated: #1a2540;

  --fg-strong:  #f1f5f9;
  --fg-default: #e2e8f0;
  --fg-muted:   #94a3b8;
  --fg-faint:   #64748b;

  --border-subtle:  #1f2a44;
  --border-default: #243049;
  --border-strong:  #334155;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 18px 36px rgba(0, 0, 0, 0.5);
}