/* WorkTools Hub - Design Tokens
 * Modern Professional: Navy / Slate palette
 */

:root {
  /* ========== Colors - Brand ========== */
  --color-primary-50:  #f0f4f9;
  --color-primary-100: #d9e2ec;
  --color-primary-200: #b3c4d6;
  --color-primary-300: #829ab1;
  --color-primary-400: #486581;
  --color-primary-500: #243b53;
  --color-primary-600: #1c2d3f;
  --color-primary-700: #14202d;
  --color-primary-800: #0d161f;
  --color-primary-900: #070c12;

  /* ========== Colors - Slate / Neutral ========== */
  --color-slate-50:  #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;

  /* ========== Colors - Accent (for badges, highlights) ========== */
  --color-accent-500: #0ea5e9;  /* sky blue */
  --color-success-500: #10b981; /* emerald */
  --color-warning-500: #f59e0b; /* amber */
  --color-danger-500:  #ef4444; /* red */

  /* ========== Semantic Aliases ========== */
  --color-bg:           var(--color-slate-50);
  --color-bg-surface:   #ffffff;
  --color-bg-elevated:  #ffffff;
  --color-text:         var(--color-slate-900);
  --color-text-muted:   var(--color-slate-600);
  --color-text-subtle:  var(--color-slate-500);
  --color-border:       var(--color-slate-200);
  --color-border-hover: var(--color-slate-300);
  --color-link:         var(--color-primary-500);
  --color-link-hover:   var(--color-primary-700);

  /* ========== Typography ========== */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
               'Liberation Mono', monospace;

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg:   1.125rem;  /* 18px */
  --fs-xl:   1.25rem;   /* 20px */
  --fs-2xl:  1.5rem;    /* 24px */
  --fs-3xl:  1.875rem;  /* 30px */
  --fs-4xl:  2.25rem;   /* 36px */
  --fs-5xl:  3rem;      /* 48px */

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

  --lh-tight:   1.2;
  --lh-snug:    1.375;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;

  /* ========== Spacing (rem-based) ========== */
  --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;
  --space-24: 6rem;

  /* ========== Layout ========== */
  --container-max:   75rem;   /* 1200px */
  --container-text:  42rem;   /* 672px - readable line length */
  --header-height:   4rem;

  /* ========== Radii ========== */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* ========== Shadows ========== */
  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.05);

  /* ========== Transitions ========== */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ========== Z-index scale ========== */
  --z-base:    1;
  --z-header:  100;
  --z-modal:   1000;
  --z-toast:   2000;
}

/* Dark mode tokens (auto-applied if user prefers) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:          var(--color-slate-900);
    --color-bg-surface:  var(--color-slate-800);
    --color-bg-elevated: var(--color-slate-700);
    --color-text:        var(--color-slate-50);
    --color-text-muted:  var(--color-slate-300);
    --color-text-subtle: var(--color-slate-400);
    --color-border:      var(--color-slate-700);
    --color-border-hover: var(--color-slate-600);
    --color-link:        var(--color-primary-200);
    --color-link-hover:  var(--color-primary-100);
  }
}