/* ============================================================
   TICK IT · Design tokens
   Light-first, sharp corners, comfortable density, enterprise-serious.
   No gradients, no AI-whitespace bloat.
   ============================================================ */

:root {
  /* ── Primary · Zendesk-leaning blue ─────────────────────── */
  --p-50:  #EEF5FB;
  --p-100: #D7E7F3;
  --p-200: #AECEE5;
  --p-300: #7FAFD3;
  --p-400: #4A8FC0;
  --p-500: #1F73B7;  /* base */
  --p-600: #195C95;
  --p-700: #144876;
  --p-800: #0F365A;
  --p-900: #0B2742;

  /* ── Neutrals · cool slate (slightly toward blue) ────────── */
  --n-0:   #FFFFFF;
  --n-25:  #FAFBFC;
  --n-50:  #F5F7FA;
  --n-100: #ECEFF3;
  --n-150: #DFE3E9;
  --n-200: #CFD4DC;
  --n-300: #B4BBC5;
  --n-400: #8B939F;
  --n-500: #6A727E;
  --n-600: #4D545E;
  --n-700: #353B44;
  --n-800: #20252C;
  --n-900: #11151B;

  /* ── Semantic colors ───────────────────────────────────── */
  --green-50:   #ECFDF3;
  --green-100:  #D1FADF;
  --green-500:  #16A34A;
  --green-600:  #15803D;
  --green-700:  #166534;

  --amber-50:   #FEF7E6;
  --amber-100:  #FCEABB;
  --amber-500:  #D97706;
  --amber-600:  #B45309;
  --amber-700:  #92400E;

  --red-50:     #FEF2F2;
  --red-100:    #FEE2E2;
  --red-500:    #DC2626;
  --red-600:    #B91C1C;
  --red-700:    #991B1B;

  --violet-50:  #F5F3FF;
  --violet-100: #EDE9FE;
  --violet-500: #7C3AED;
  --violet-600: #6D28D9;

  /* ── Channel / category accents (tags etc) ──────────────── */
  --channel-email:    #1F73B7;
  --channel-whatsapp: #25D366;
  --channel-sms:      #6B7280;
  --channel-phone:    #6366F1;

  /* ── Semantic aliases (light) — these flip in dark mode ─── */
  --bg:               var(--n-50);
  --bg-strong:        var(--n-100);
  --surface:          var(--n-0);
  --surface-2:        var(--n-25);
  --surface-3:        var(--n-50);
  --surface-hover:    var(--n-100);
  --border:           var(--n-150);
  --border-strong:    var(--n-200);
  --border-focus:     var(--p-500);
  --fg:               var(--n-900);
  --fg-soft:          var(--n-700);
  --fg-muted:         var(--n-500);
  --fg-faint:         var(--n-400);
  --fg-on-primary:    #FFFFFF;

  --primary:          var(--p-500);
  --primary-hover:    var(--p-600);
  --primary-active:   var(--p-700);
  --primary-soft:     var(--p-50);
  --primary-soft-2:   var(--p-100);
  --primary-text:     var(--p-700);
  --link:             var(--p-600);

  --success:          var(--green-600);
  --success-soft:     var(--green-50);
  --success-text:     var(--green-700);
  --warning:          var(--amber-600);
  --warning-soft:     var(--amber-50);
  --warning-text:     var(--amber-700);
  --danger:           var(--red-600);
  --danger-soft:      var(--red-50);
  --danger-text:      var(--red-700);

  /* ── Radii — sharp ──────────────────────────────────── */
  --r-xs:   2px;
  --r-sm:   3px;
  --r-md:   4px;
  --r-lg:   6px;
  --r-pill: 999px;

  /* ── Spacing · 4px grid ─────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;

  /* ── Type ───────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --t-11: 11px;
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;   /* base body */
  --t-15: 15px;
  --t-16: 16px;
  --t-18: 18px;
  --t-20: 20px;
  --t-24: 24px;
  --t-28: 28px;
  --t-32: 32px;

  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.5;

  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ── Shadows — subtle, max 3 levels ─────────────────── */
  --shadow-xs: 0 1px 0 rgba(15,30,55,0.04);
  --shadow-sm: 0 1px 2px rgba(15,30,55,0.06), 0 0 0 1px rgba(15,30,55,0.02);
  --shadow-md: 0 4px 12px rgba(15,30,55,0.08), 0 1px 2px rgba(15,30,55,0.04);
  --shadow-lg: 0 12px 28px rgba(15,30,55,0.12), 0 2px 4px rgba(15,30,55,0.05);
  --shadow-popover: 0 8px 24px rgba(15,30,55,0.12), 0 0 0 1px rgba(15,30,55,0.06);

  /* ── Layout ─────────────────────────────────────────── */
  --sidebar-w:          236px;
  --sidebar-collapsed:  56px;
  --topbar-h:           48px;
  --row-h:              36px;
  --row-h-dense:        32px;

  /* ── Motion ─────────────────────────────────────────── */
  --t-fast:    120ms;
  --t-base:    180ms;
  --t-slow:    260ms;
  --ease:      cubic-bezier(.2,.7,.3,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in:   cubic-bezier(.7,0,1,1);

  /* ── Z-layers ───────────────────────────────────────── */
  --z-sticky:    10;
  --z-overlay:   100;
  --z-popover:   1000;
  --z-modal:     1100;
  --z-toast:     1200;
}

/* Future dark scaffold — light first, but tokens ready */
[data-theme="dark"] {
  --bg:            var(--n-900);
  --bg-strong:     var(--n-800);
  --surface:       var(--n-800);
  --surface-2:     var(--n-700);
  --surface-3:     var(--n-700);
  --surface-hover: var(--n-700);
  --border:        var(--n-700);
  --border-strong: var(--n-600);
  --fg:            var(--n-50);
  --fg-soft:       var(--n-200);
  --fg-muted:      var(--n-400);
  --fg-faint:      var(--n-500);
  --primary-soft:   #1B2C3F;
  --primary-soft-2: #243A55;
  --primary-text:   var(--p-300);
}