/* ============================================================
   BROCADE — Design Token Sheet
   Two-layer architecture: raw primitives → semantic tokens
   byre Operator & Client Portal
   ============================================================ */

/* ------------------------------------------------------------
   LAYER 1: Raw Primitives
   ------------------------------------------------------------ */
:root {
  /* --- Colour Palette --- */
  --color-grey-0:   #ffffff;
  --color-grey-25:  #fdfdfd;
  --color-grey-50:  #f8f9fa;
  --color-grey-100: #f1f3f5;
  --color-grey-200: #e9ecef;
  --color-grey-300: #dee2e6;
  --color-grey-400: #adb5bd;
  --color-grey-500: #6c757d;
  --color-grey-600: #495057;
  --color-grey-700: #343a40;
  --color-grey-750: #2b3035;
  --color-grey-800: #212529;
  --color-grey-850: #1a1d20;
  --color-grey-900: #141618;
  --color-grey-950: #0d0f11;

  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;

  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;

  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;

  --color-red-400:  #f87171;
  --color-red-500:  #ef4444;
  --color-red-600:  #dc2626;

  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;

  /* --- Typography --- */
  --font-sans:   "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:   "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */

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

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  /* --- Spacing --- */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Border Radius --- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* --- Transitions --- */
  --transition-fast:   100ms ease;
  --transition-base:   150ms ease;
  --transition-slow:   250ms ease;

  /* --- Z-index --- */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}


/* ------------------------------------------------------------
   LAYER 2: Semantic Tokens — Light Mode (default)
   ------------------------------------------------------------ */
:root,
[data-mode="light"] {
  /* Surfaces */
  --surface-bg:         var(--color-grey-50);
  --surface-base:       var(--color-grey-0);
  --surface-raised:     var(--color-grey-0);
  --surface-overlay:    var(--color-grey-100);
  --surface-nav:        var(--color-grey-0);
  --surface-input:      var(--color-grey-0);
  --surface-chat-user:  var(--color-blue-600);
  --surface-chat-asst:  var(--color-grey-100);

  /* Borders */
  --border-subtle:  var(--color-grey-200);
  --border-default: var(--color-grey-300);
  --border-strong:  var(--color-grey-400);
  --border-focus:   var(--color-blue-500);

  /* Text */
  --text-primary:   var(--color-grey-900);
  --text-secondary: var(--color-grey-600);
  --text-muted:     var(--color-grey-500);
  --text-disabled:  var(--color-grey-400);
  --text-inverse:   var(--color-grey-0);
  --text-accent:    var(--color-blue-600);
  --text-chat-user: var(--color-grey-0);
  --text-chat-asst: var(--color-grey-900);
  --text-code:      var(--color-indigo-600);

  /* Interactive */
  --accent:               var(--color-blue-600);
  --accent-hover:         var(--color-blue-700);
  --accent-subtle:        var(--color-blue-100);
  --accent-subtle-hover:  var(--color-blue-200);

  /* Status */
  --status-success:  var(--color-green-500);
  --status-warning:  var(--color-amber-500);
  --status-danger:   var(--color-red-500);
  --status-info:     var(--color-blue-500);

  /* Navigation */
  --nav-width:          240px;
  --nav-item-hover:     var(--color-grey-100);
  --nav-item-active-bg: var(--color-blue-100);
  --nav-item-active-text: var(--color-blue-700);
  --nav-item-inactive-text: var(--color-grey-600);

  /* Chat */
  --chat-max-width: 680px;

  /* Shadows (light-specific) */
  --shadow-nav: 1px 0 0 0 var(--color-grey-200);
  --shadow-card: var(--shadow-sm);
}


/* ------------------------------------------------------------
   LAYER 2: Semantic Tokens — Dark Mode
   ------------------------------------------------------------ */
[data-mode="dark"] {
  /* Surfaces */
  --surface-bg:         var(--color-grey-950);
  --surface-base:       var(--color-grey-900);
  --surface-raised:     var(--color-grey-850);
  --surface-overlay:    var(--color-grey-800);
  --surface-nav:        var(--color-grey-900);
  --surface-input:      var(--color-grey-850);
  --surface-chat-user:  var(--color-blue-600);
  --surface-chat-asst:  var(--color-grey-800);

  /* Borders */
  --border-subtle:  var(--color-grey-800);
  --border-default: var(--color-grey-700);
  --border-strong:  var(--color-grey-600);
  --border-focus:   var(--color-blue-400);

  /* Text */
  --text-primary:   var(--color-grey-50);
  --text-secondary: var(--color-grey-400);
  --text-muted:     var(--color-grey-500);
  --text-disabled:  var(--color-grey-600);
  --text-inverse:   var(--color-grey-900);
  --text-accent:    var(--color-blue-400);
  --text-chat-user: var(--color-grey-0);
  --text-chat-asst: var(--color-grey-50);
  --text-code:      var(--color-blue-300);

  /* Interactive */
  --accent:               var(--color-blue-500);
  --accent-hover:         var(--color-blue-400);
  --accent-subtle:        rgba(59, 130, 246, 0.15);
  --accent-subtle-hover:  rgba(59, 130, 246, 0.25);

  /* Status */
  --status-success:  var(--color-green-400);
  --status-warning:  var(--color-amber-400);
  --status-danger:   var(--color-red-400);
  --status-info:     var(--color-blue-400);

  /* Navigation */
  --nav-item-hover:           var(--color-grey-800);
  --nav-item-active-bg:       rgba(59, 130, 246, 0.15);
  --nav-item-active-text:     var(--color-blue-400);
  --nav-item-inactive-text:   var(--color-grey-400);

  /* Shadows (dark-specific) */
  --shadow-nav:  1px 0 0 0 var(--color-grey-800);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.4);
}