/* ==========================================================================
   SlackHopper design tokens

   Every color, type size, spacing step, radius and shadow used anywhere in
   the UI is defined here and only here. Components in styles.css reference
   the ROLE tokens (--bg, --text, --primary, ...) rather than raw scales, so
   re-theming is a change to this file alone.
   ========================================================================== */

:root {
  /* ---- Brand (from the logo: cyan tile, pink mark) --------------------- */
  --brand-cyan: #36c5f0;
  --brand-pink: #e71754;

  /* ---- Primary: a deeper cut of the logo cyan that passes AA on white --- */
  --primary-50:  #eaf8fd;
  --primary-100: #d2f0fa;
  --primary-200: #a6e1f5;
  --primary-500: #0f7fa3;
  --primary-600: #0c6b8a;
  --primary-700: #0a566f;
  --primary-800: #094458;

  /* ---- Ink: dark surfaces (top bar, footer, drawer header) -------------- */
  --ink-900: #0b1f2a;
  --ink-800: #123243;
  --ink-700: #1d4558;
  --ink-text: #e6f1f6;
  --ink-text-muted: rgba(230, 241, 246, 0.68);
  --ink-hover: rgba(255, 255, 255, 0.08);
  --code-string: #ffd479;  /* string literals in the dark code sample */

  /* ---- Neutrals (cool gray, sits well with the cyan) -------------------- */
  --gray-50:  #f6f8fa;
  --gray-100: #eef1f4;
  --gray-200: #e2e7ec;
  --gray-300: #cbd3db;
  --gray-400: #9aa6b2;
  --gray-500: #6b7887;
  --gray-600: #4f5b69;
  --gray-700: #36404b;
  --gray-800: #232b33;
  --gray-900: #0f1620;

  /* ---- Semantic. Portfolio rule: success emerald, error crimson, info purple. */
  --success-600: #059669;
  --success-700: #047857;
  --success-100: #d1fae5;
  --success-50:  #ecfdf5;

  --error-600: #dc2626;
  --error-700: #b91c1c;
  --error-100: #fee2e2;
  --error-50:  #fef2f2;

  --warning-600: #b45309;
  --warning-700: #92400e;
  --warning-100: #fef3c7;
  --warning-50:  #fffbeb;

  --info-600: #6d28d9;
  --info-700: #5b21b6;
  --info-100: #ede9fe;
  --info-50:  #f5f3ff;

  /* ---- Roles: components use these ------------------------------------- */
  --bg:             var(--gray-50);
  --surface:        #ffffff;
  --surface-muted:  var(--gray-50);
  --surface-sunken: var(--gray-100);
  --border:         var(--gray-200);
  --border-strong:  var(--gray-300);
  --text:           var(--gray-900);
  --text-muted:     var(--gray-500);
  --text-subtle:    var(--gray-400);
  --heading:        var(--gray-900);
  --link:           var(--primary-600);
  --link-hover:     var(--primary-700);
  --primary:        var(--primary-600);
  --primary-hover:  var(--primary-700);
  --primary-active: var(--primary-800);
  --on-primary:     #ffffff;
  --focus-ring:     0 0 0 3px rgba(54, 197, 240, 0.45);
  --focus-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.30);

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

  --text-xs:   0.75rem;   /* eyebrow labels only, never body copy */
  --text-sm:   0.875rem;  /* smallest size for anything readable */
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.375rem;
  --text-5xl:  3rem;

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;

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

  /* ---- Space (4px scale) ---------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ---- Shape ------------------------------------------------------------ */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 22, 32, 0.06);
  --shadow-md: 0 1px 2px rgba(15, 22, 32, 0.05), 0 4px 14px rgba(15, 22, 32, 0.06);
  --shadow-lg: 0 10px 34px rgba(15, 22, 32, 0.14);

  /* ---- Layout ----------------------------------------------------------- */
  --container:  1120px;
  --container-narrow: 720px;
  --nav-height: 64px;
  --tap: 44px;  /* minimum tap target */

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur:  160ms;
  --dur-slow: 260ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-slow: 0ms; }
}