/* ==========================================================================
   DESIGN TOKENS — Agency Media Manager
   Notion + Linear + ClickUp, tối giản & nhanh.
   ========================================================================== */

:root {
  /* --- Typography --- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-base: 13.5px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;

  /* --- Radius / Shadow / Spacing --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, .08);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, .12);
  --shadow-lg: 0 16px 48px rgba(15, 23, 42, .18);
  --transition: 150ms cubic-bezier(.4,0,.2,1);

  /* --- Màu theo Loại công việc (spec) --- */
  --c-quay: #EF4444;      /* Đỏ: Quay */
  --c-chup: #F97316;      /* Cam: Chụp */
  --c-video: #22C55E;     /* Xanh lá: Video */
  --c-dangbai: #3B82F6;   /* Xanh dương: Đăng bài */
  --c-deadline: #A855F7;  /* Tím: Deadline */
  --c-huy: #94A3B8;       /* Xám: Huỷ */

  /* --- Màu trạng thái --- */
  --s-draft: #94A3B8;
  --s-planning: #A855F7;
  --s-confirmed: #0EA5E9;
  --s-in_progress: #F59E0B;
  --s-reviewing: #8B5CF6;
  --s-done: #22C55E;
  --s-canceled: #6B7280;

  /* --- Accent --- */
  --accent: #4F46E5;
  --accent-hover: #4338CA;
  --danger: #EF4444;
  --danger-bg: #FEE2E2;
  --warning: #F59E0B;
  --warning-bg: #FEF3C7;
  --success: #22C55E;
  --success-bg: #DCFCE7;
  --info: #3B82F6;
  --info-bg: #DBEAFE;
}

/* ---------------- LIGHT THEME (default) ---------------- */
:root, [data-theme="light"] {
  --bg-app: #F7F8FA;
  --bg-surface: #FFFFFF;
  --bg-surface-2: #F1F3F6;
  --bg-hover: #F0F1F5;
  --bg-sidebar: #FFFFFF;
  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-tertiary: #9CA3AF;
  --overlay: rgba(15, 23, 42, .45);
}

/* ---------------- DARK THEME ---------------- */
[data-theme="dark"] {
  --bg-app: #0F1115;
  --bg-surface: #17191F;
  --bg-surface-2: #1D2027;
  --bg-hover: #22252D;
  --bg-sidebar: #14161B;
  --border: #2A2D36;
  --border-strong: #383C47;
  --text-primary: #F3F4F6;
  --text-secondary: #9CA3AF;
  --text-tertiary: #6B7280;
  --overlay: rgba(0, 0, 0, .6);
}