/* ═══════════════════════════════════════════════════════════
   tokens.css — ThreadOS v2 Design Tokens
   IMPORT ĐẦU TIÊN. Mọi file CSS khác chỉ dùng biến từ đây.
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ═══ SURFACE ═══════════════════════════════════════════ */
  --surface-base:    #FFFFFF;
  --surface-raised:  #FFFFFF;
  --surface-card:    #FFFFFF;
  --surface-sunken:  #F9F9FB;
  --surface-overlay: rgba(255, 255, 255, 0.92);

  /* ═══ BORDER ═════════════════════════════════════════════ */
  --border-subtle:   rgba(15, 23, 42, 0.06);
  --border-default:  rgba(15, 23, 42, 0.11);
  --border-strong:   rgba(15, 23, 42, 0.20);
  --border-ghost:    rgba(15, 23, 42, 0.03);
  --border-focus:    #0F172A;

  /* ═══ TEXT ═══════════════════════════════════════════════ */
  --text-primary:    #0F172A;
  --text-secondary:  #3D4A5C;
  --text-tertiary:   #8898AA;
  --text-disabled:   #C4CDD8;

  /* ═══ TONE GRADIENTS (chỉ cho badge/chip nhỏ) ═══════════ */
  --grad-curiosity:  linear-gradient(135deg, #f59e0b, #ef4444);
  --grad-drama:      linear-gradient(135deg, #ef4444, #dc2626);
  --grad-authority:  linear-gradient(135deg, #7c3aed, #4f46e5);
  --grad-casual:     linear-gradient(135deg, #059669, #10b981);
  --grad-story:      linear-gradient(135deg, #d97706, #f59e0b);
  --grad-viral:      linear-gradient(135deg, #0ea5e9, #6366f1);

  /* ═══ SYSTEM GRADIENTS (gần flat) ═══════════════════════ */
  --grad-sidebar:    linear-gradient(180deg, #ffffff 0%, #F9F9FB 100%);
  --grad-card:       linear-gradient(160deg, #ffffff 0%, #F9F9FB 100%);
  --grad-topbar:     linear-gradient(180deg, #ffffff 0%, #F9F9FB 100%);

  /* Stat card accent gradients */
  --grad-purple:     linear-gradient(135deg, #7c3aed, #4f46e5);
  --grad-blue:       linear-gradient(135deg, #2563eb, #0ea5e9);
  --grad-green:      linear-gradient(135deg, #059669, #10b981);
  --grad-pink:       linear-gradient(135deg, #db2777, #f43f5e);

  /* ═══ STATUS ═════════════════════════════════════════════ */
  --status-posted:    #16a34a;
  --status-scheduled: #2563eb;
  --status-draft:     #94A3B8;
  --status-live:      #dc2626;
  --status-approved:  #059669;
  --status-reviewing: #d97706;

  /* ═══ LAYOUT DIMENSIONS ══════════════════════════════════ */
  --sidebar-w:      220px;
  --topbar-h:       44px;
  --statusbar-h:    28px;

  /* ═══ RADIUS ════════════════════════════════════════════ */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius:     10px;
  --radius-lg:  14px;
  --radius-xl:  18px;

  /* ═══ FONTS ═════════════════════════════════════════════ */
  --font-sys:   'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
  --font-mono:  'JetBrains Mono', 'Menlo', 'Courier New', monospace;

  /* ═══ SHADOWS ═══════════════════════════════════════════ */
  --shadow-xs:    0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-sm:    0 1px 6px rgba(15, 23, 42, 0.07), 0 0 0 1px rgba(15, 23, 42, 0.05);
  --shadow-md:    0 4px 18px rgba(15, 23, 42, 0.09), 0 0 0 1px rgba(15, 23, 42, 0.05);
  --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-focus: 0 0 0 3px rgba(15, 23, 42, 0.06);

  /* ═══ Z-INDEX ═══════════════════════════════════════════ */
  --z-sysbar:  100;
  --z-sidebar: 90;
  --z-topbar:  80;
  --z-modal:   200;
  --z-toast:   300;

  /* ═══ TRANSITIONS ═══════════════════════════════════════ */
  --transition-hover:  0.12s ease;
  --transition-expand: 0.2s ease;
}