/* ==========================================================================
   CodeForge Design Tokens
   Canonical single source of truth for design variables.
   ========================================================================== */

:root {
  /* Neutral Gray Scale */
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --gray-950: #020617;

  /* Brand Accent */
  --color-brand-50:  #eef2ff;
  --color-brand-100: #e0e7ff;
  --color-brand-200: #c7d2fe;
  --color-brand-300: #a5b4fc;
  --color-brand-400: #818cf8;
  --color-brand-500: #6366f1;
  --color-brand-600: #4f46e5;
  --color-brand-700: #4338ca;
  --color-brand-800: #3730a3;
  --color-brand-900: #312e81;

  /* Status Colors */
  --color-success-500: #10b981;
  --color-warning-500: #f59e0b;
  --color-danger-500:  #f43f5e;
  --color-info-500:    #0ea5e9;

  /* Semantic Theme Variables */
  --bg-canvas:          var(--gray-950);
  --bg-surface:         var(--gray-900);
  --bg-surface-raised:  var(--gray-800);
  --bg-surface-hover:   #273549;

  --text-primary:       var(--gray-50);
  --text-secondary:     var(--gray-300);
  --text-muted:         var(--gray-400);
  --text-inverse:       var(--gray-950);

  --border-subtle:      var(--gray-800);
  --border-default:     var(--gray-700);
  --border-strong:      var(--gray-600);
  --border-focus:       var(--color-brand-500);

  --color-primary:        var(--color-brand-500);
  --color-primary-hover:  var(--color-brand-400);
  --color-primary-active: var(--color-brand-600);

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

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;

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

  --lh-normal:  1.5;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;

  /* Dimensions */
  --header-height:           3.5rem;
  --footer-height:           2.25rem;
  --sidebar-width:           18rem;
  --sidebar-collapsed-width: 4rem;
  --command-bar-min-h:       3.75rem;
  --status-bar-height:       2rem;
  --chat-max-width:          48rem;
  --touch-target-min:        2.75rem;

  /* Radii */
  --radius-sm:   0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-full: 9999px;

  /* Z-Index */
  --z-header:        300;
  --z-sidebar:       400;
  --z-boot:          9999;

  /* Motion */
  --dur-fast:     150ms;
  --dur-base:     250ms;
  --dur-slow:     400ms;
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
}