/*
 * AEC Buddy design tokens: the one source of color, type, space, shape, depth and motion for every page (the workspace shell, the embedded model Viewer page, the chat overlay).
 * Load it first, then design/base.css, then the page's own styles. Components use the semantic tokens (--ab-surface, --ab-text-secondary, --ab-accent, --ab-success-*, ...), never
 * the primitives or a literal color. Light only: the APS Viewer chrome and the document tree are light, and one theme keeps the pilot consistent.
 * The names at the end are the earlier ones (Drafting Table, the shell skin, the Viewer page), kept as aliases so existing component styles take this design without a rewrite.
 */
:root {
  color-scheme: light;

  /* ── Primitives ─────────────────────────────────────────────────────────── */
  --ab-neutral-0:   #FFFFFF;
  --ab-neutral-25:  #FAFBFC;
  --ab-neutral-50:  #F5F7F9;
  --ab-neutral-100: #EDF0F3;
  --ab-neutral-150: #E4E8EC;
  --ab-neutral-200: #D9DEE4;
  --ab-neutral-300: #C2CAD3;
  --ab-neutral-400: #94A0AE;
  --ab-neutral-500: #687586;
  --ab-neutral-600: #4D5867;
  --ab-neutral-700: #36404D;
  --ab-neutral-800: #232B35;
  --ab-neutral-900: #151A21;

  /* Blueprint blue: the one brand color. 600 carries text and fills (7:1 on white). */
  --ab-brand-50:  #ECF5F9;
  --ab-brand-100: #D6EAF2;
  --ab-brand-200: #ADD3E4;
  --ab-brand-300: #7DB6D0;
  --ab-brand-400: #4A93B5;
  --ab-brand-500: #237599;
  --ab-brand-600: #145F80;
  --ab-brand-700: #0F4C68;
  --ab-brand-800: #0B3A50;

  /* ── Surfaces, borders, text ────────────────────────────────────────────── */
  --ab-bg:               var(--ab-neutral-50);     /* the app canvas behind panels */
  --ab-surface:          var(--ab-neutral-0);      /* panels, cards, inputs */
  --ab-surface-raised:   var(--ab-neutral-25);     /* table headers, quiet blocks inside a surface */
  --ab-surface-sunken:   var(--ab-neutral-100);    /* wells, tracks, code */
  --ab-surface-hover:    var(--ab-neutral-50);
  --ab-surface-selected: var(--ab-brand-50);
  --ab-overlay-scrim:    rgba(21, 26, 33, .38);

  --ab-border:           var(--ab-neutral-150);
  --ab-border-strong:    var(--ab-neutral-300);
  --ab-divider:          var(--ab-neutral-150);

  --ab-text-primary:     var(--ab-neutral-900);
  --ab-text-secondary:   var(--ab-neutral-600);
  --ab-text-muted:       var(--ab-neutral-500);
  --ab-text-disabled:    var(--ab-neutral-400);
  --ab-text-inverse:     var(--ab-neutral-0);
  --ab-text-link:        var(--ab-brand-600);

  /* ── Accent and focus ───────────────────────────────────────────────────── */
  --ab-accent:           var(--ab-brand-600);
  --ab-accent-hover:     var(--ab-brand-700);
  --ab-accent-active:    var(--ab-brand-800);
  --ab-accent-soft:      var(--ab-brand-50);
  --ab-accent-soft-hover: var(--ab-brand-100);
  --ab-accent-border:    var(--ab-brand-200);
  --ab-on-accent:        var(--ab-neutral-0);
  --ab-focus-color:      var(--ab-brand-500);
  --ab-focus-ring:       0 0 0 3px rgba(35, 117, 153, .32);

  /* ── Status: text, background, border, and a solid for dots and bars ────── */
  --ab-info-text: var(--ab-brand-700);  --ab-info-bg: var(--ab-brand-50);   --ab-info-border: var(--ab-brand-200);   --ab-info-solid: var(--ab-brand-500);
  --ab-success-text: #1C6B47;           --ab-success-bg: #E9F6EF;           --ab-success-border: #B9E0CB;            --ab-success-solid: #2E9A66;
  --ab-warning-text: #8A5300;           --ab-warning-bg: #FDF4E3;           --ab-warning-border: #F0D29A;            --ab-warning-solid: #D9900F;
  --ab-danger-text: #A83226;            --ab-danger-bg: #FCEDEB;            --ab-danger-border: #F2C5BF;             --ab-danger-solid: #CC4433;
  --ab-neutral-text: var(--ab-neutral-600); --ab-neutral-bg: var(--ab-neutral-100); --ab-neutral-border: var(--ab-neutral-200); --ab-neutral-solid: var(--ab-neutral-400);
  --ab-highlight-bg: #FFF3B0;           /* a search match or a just-changed value */

  /* ── Navigation (the shell's sidebar) ───────────────────────────────────── */
  --ab-nav-bg:           var(--ab-neutral-25);
  --ab-nav-text:         var(--ab-neutral-700);
  --ab-nav-text-muted:   var(--ab-neutral-500);
  --ab-nav-hover-bg:     var(--ab-neutral-100);
  --ab-nav-active:       var(--ab-brand-700);
  --ab-nav-active-bg:    var(--ab-brand-50);
  --ab-nav-indicator:    var(--ab-brand-600);
  --ab-nav-divider:      var(--ab-neutral-150);

  /* ── Charts: categorical series, the same on issue and model tiles ──────── */
  --ab-chart-1: #237599; --ab-chart-2: #eb6834; --ab-chart-3: #1baf7a; --ab-chart-4: #eda100;
  --ab-chart-5: #e87ba4; --ab-chart-6: #008300; --ab-chart-7: #4a3aa7; --ab-chart-8: #e34948;

  /* ── Type ───────────────────────────────────────────────────────────────── */
  --ab-font:          'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ab-font-display:  var(--ab-font);
  --ab-mono:          'IBM Plex Mono', 'Cascadia Code', Consolas, monospace;
  --ab-fs-2xs: 11px;
  --ab-fs-xs:  12px;
  --ab-fs-sm:  13px;   /* dense tool panels (the Viewer page) */
  --ab-fs-base: 14px;  /* body text */
  --ab-fs-md:  16px;
  --ab-fs-lg:  20px;
  --ab-fs-xl:  24px;
  --ab-fs-2xl: 30px;
  --ab-fw-regular: 400; --ab-fw-medium: 500; --ab-fw-semibold: 600; --ab-fw-bold: 700;
  --ab-lh-tight: 1.25; --ab-lh-snug: 1.4; --ab-lh-body: 1.55;
  --ab-tracking-tight: -.01em; --ab-tracking-caps: .06em;

  /* ── Space (4 px grid) ─────────────────────────────────────────────────── */
  --ab-space-1: 4px;  --ab-space-2: 8px;  --ab-space-3: 12px; --ab-space-4: 16px;
  --ab-space-5: 20px; --ab-space-6: 24px; --ab-space-8: 32px; --ab-space-10: 40px; --ab-space-12: 48px;

  /* ── Shape and depth ───────────────────────────────────────────────────── */
  --ab-r-xs: 4px; --ab-r-sm: 6px; --ab-r-md: 8px; --ab-r-lg: 12px; --ab-r-xl: 16px; --ab-r-pill: 999px;
  --ab-shadow-xs: 0 1px 2px rgba(21, 26, 33, .06);
  --ab-shadow-sm: 0 1px 3px rgba(21, 26, 33, .08), 0 1px 2px rgba(21, 26, 33, .04);
  --ab-shadow-md: 0 6px 16px rgba(21, 26, 33, .10), 0 1px 3px rgba(21, 26, 33, .05);
  --ab-shadow-lg: 0 16px 40px rgba(21, 26, 33, .16), 0 2px 6px rgba(21, 26, 33, .06);

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --ab-ease: cubic-bezier(.2, 0, 0, 1);
  --ab-dur-fast: 120ms; --ab-dur: 180ms;

  /* ── Controls ──────────────────────────────────────────────────────────── */
  --ab-control-h-sm: 30px; --ab-control-h: 36px; --ab-control-h-lg: 44px;

  /* ── Layout (the shell) ────────────────────────────────────────────────── */
  --ab-topbar-height: 56px;
  --ab-sidebar-width: 240px;
  --ab-context-width: 300px;
  --ab-rail-width: 0px;

  /* ── The chat overlay (plain-chat/overlay/chat-overlay.js reads these) ─── */
  --ab-panel-bg: var(--ab-surface); --ab-panel-border: var(--ab-border); --ab-panel-radius: var(--ab-r-xl); --ab-panel-shadow: rgba(21, 26, 33, .14);
  --ab-msg-ai-color: var(--ab-text-primary); --ab-msg-user-color: var(--ab-text-primary); --ab-msg-user-bg: var(--ab-accent-soft); --ab-msg-user-border: var(--ab-accent-border);
  --ab-command-bg: var(--ab-surface); --ab-command-text: var(--ab-text-primary); --ab-command-placeholder: var(--ab-text-muted); --ab-command-border: var(--ab-border-strong);
  --ab-command-border-focus: var(--ab-focus-color); --ab-command-button-bg: var(--ab-accent); --ab-command-button-color: var(--ab-on-accent); --ab-command-button-bg-hover: var(--ab-accent-hover);
  --ab-meta-color: var(--ab-text-muted); --ab-header-border: var(--ab-divider); --ab-logo-radius: var(--ab-r-md);
  --ab-link-color: var(--ab-accent); --ab-link-bg: var(--ab-accent-soft); --ab-link-border: transparent; --ab-link-bg-hover: var(--ab-accent-soft-hover);
  --ab-fs-cmd: 15px;

  /* ── Earlier names, as aliases ─────────────────────────────────────────── */
  --ab-accent-secondary: var(--ab-accent);
  --ab-blue-bg: var(--ab-info-bg);       --ab-blue-text: var(--ab-info-text);       --ab-blue-border: var(--ab-info-border);
  --ab-green-bg: var(--ab-success-bg);   --ab-green-text: var(--ab-success-text);   --ab-green-border: var(--ab-success-border);
  --ab-amber-bg: var(--ab-warning-bg);   --ab-amber-text: var(--ab-warning-text);   --ab-amber-border: var(--ab-warning-border);
  --ab-red-bg: var(--ab-danger-bg);      --ab-red-text: var(--ab-danger-text);      --ab-red-border: var(--ab-danger-border);
  --ab-gray-bg: var(--ab-neutral-bg);    --ab-gray-text: var(--ab-neutral-text);    --ab-gray-border: var(--ab-neutral-border);
  --ab-danger: var(--ab-danger-solid);
  --ab-error: var(--ab-danger-text);
  --ab-r-2xl: var(--ab-r-xl);
  /* The Viewer page's names (main.css and the loaded-models panel). */
  --primary-color: var(--ab-text-primary);
  --secondary-color: var(--ab-accent);
  --secondary-hover: var(--ab-accent-hover);
  --bg-main: var(--ab-bg);
  --bg-panel: var(--ab-surface);
  --border-color: var(--ab-border);
  --text-main: var(--ab-text-primary);
  --text-muted: var(--ab-text-secondary);
}