/* =====================================================================
   TOKENS — Design system for Todo Namnan
   Style: Modern Minimal (Option A) with editorial accent
   Inspired by Linear, Notion, Stripe
   ===================================================================== */

:root {
  /* ============ COLORS — Light mode ============ */
  --bg-app:        #fafafa;
  --bg-board:      #f4f4f5;
  --bg-light:      #ffffff;
  --bg-card:       #ffffff;
  --bg-card-hover: #f8f8f8;
  --bg-elevated:   #ffffff;
  --text:          #18181b;
  --text-mute:     #71717a;
  --text-faint:    #a1a1aa;
  --text-inv:      #fafafa;
  --border:        #e4e4e7;
  --border-strong: #d4d4d8;

  /* Brand — Minimal accent */
  --primary:       #18181b;       /* black */
  --primary-hover: #27272a;
  --primary-fg:    #fafafa;
  --accent:        #2563eb;       /* blue */
  --accent-hover:  #1d4ed8;
  --accent-2:      #9333ea;       /* purple */
  --ok:            #16a34a;
  --warn:          #d97706;
  --danger:        #dc2626;
  --info:          #0284c7;

  /* Kind colors (4 entity types) */
  --kind-activities: #2563eb; /* blue */
  --kind-plans:      #9333ea; /* purple */
  --kind-debug:      #dc2626; /* red */
  --kind-todos:      #16a34a; /* green */

  /* Priority palette (4) */
  --p-urgent:  #dc2626;
  --p-high:    #d97706;
  --p-medium:  #2563eb;
  --p-low:     #a1a1aa;

  /* Status colors */
  --s-planned:    #2563eb;
  --s-progress:   #d97706;
  --s-blocked:    #dc2626;
  --s-done:       #16a34a;
  --s-cancelled:  #a1a1aa;

  /* ============ SHADOWS (3 tiers) ============ */
  --shadow-xs:       0 1px 2px rgba(0,0,0,.04);
  --shadow-card:     0 1px 2px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.06);
  --shadow-card-hover: 0 2px 4px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
  --shadow-list:     0 2px 4px rgba(0,0,0,.04), 0 8px 16px rgba(0,0,0,.04);
  --shadow-modal:    0 16px 48px rgba(0,0,0,.20), 0 0 1px rgba(0,0,0,.08);
  --shadow-fab:      0 4px 12px rgba(0,0,0,.12), 0 12px 32px rgba(0,0,0,.10);

  /* ============ RADII ============ */
  --r-xs: 4px; --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px;

  /* ============ FONTS ============ */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-th:   'Sarabun', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --font-serif: 'Charter', 'Iowan Old Style', Georgia, serif;

  /* ============ SPACING ============ */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* ============ GRADIENTS ============ */
  --grad-logo:    linear-gradient(135deg, #2563eb, #9333ea);
  --grad-p-urgent: linear-gradient(135deg, #dc2626, #f87171);
  --grad-p-high:   linear-gradient(135deg, #d97706, #fbbf24);
  --grad-p-medium: linear-gradient(135deg, #2563eb, #60a5fa);
  --grad-success:  linear-gradient(135deg, #16a34a, #4ade80);
  --grad-warn:     linear-gradient(135deg, #f59e0b, #fde68a);
  --grad-purple:   linear-gradient(135deg, #9333ea, #c084fc);

  /* ============ LAYOUT ============ */
  --sidebar-w:     240px;
  --topbar-h:      64px;
  --maxw:          1440px;
}

/* ============ DARK MODE ============ */
[data-theme="dark"] {
  --bg-app:        #09090b;
  --bg-board:      #18181b;
  --bg-light:      #18181b;
  --bg-card:       #1f1f23;
  --bg-card-hover: #27272a;
  --bg-elevated:   #27272a;
  --text:          #fafafa;
  --text-mute:     #a1a1aa;
  --text-faint:    #71717a;
  --text-inv:      #09090b;
  --border:        #27272a;
  --border-strong: #3f3f46;

  --shadow-xs:       0 1px 2px rgba(0,0,0,.4);
  --shadow-card:     0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.2);
  --shadow-card-hover: 0 4px 8px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.3);
  --shadow-list:     0 2px 4px rgba(0,0,0,.4), 0 8px 16px rgba(0,0,0,.2);
  --shadow-modal:    0 16px 48px rgba(0,0,0,.6), 0 0 1px rgba(0,0,0,.4);
  --shadow-fab:      0 4px 12px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.4);
}

/* ============ ANIMATIONS ============ */
@keyframes urgentPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.5); }
  50%     { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}
@keyframes glowRing {
  0%,100% { filter: drop-shadow(0 0 6px rgba(239,68,68,.6)); }
  50%     { filter: drop-shadow(0 0 16px rgba(239,68,68,1)); }
}
@keyframes fadeIn  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes scaleIn { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes countUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}