/* Bray Cloud design tokens — the single source of color/space/type/motion.
 * Dark is the default; light redefines the same tokens under [data-theme="light"].
 * Components reference ONLY these variables — no hardcoded hex (see UI_AUDIT.md #1). */

:root {
  color-scheme: dark;

  /* surfaces */
  --bc-bg-workspace: #0c0e13;
  --bc-bg-panel:     #12151c;
  --bc-bg-elevated:  #171b24;
  --bc-bg-inset:     #0e1116;
  --bc-bg-hover:     #1c212c;
  --bc-bg-selected:  #1b2740;

  /* borders / focus */
  --bc-border:        #232834;
  --bc-border-strong: #333a49;
  --bc-focus-ring:    #3b6fe0;

  /* text */
  --bc-text-primary:  #e7eaf0;
  --bc-text-secondary:#a8b0bf;
  --bc-text-muted:    #6e7686;
  --bc-text-disabled: #4a5160;

  /* brand accent (NOT status) */
  --bc-accent:        #3b6fe0;
  --bc-accent-hover:  #4d80f0;
  --bc-accent-active: #2f5fc8;
  --bc-on-accent:     #ffffff;
  /* Accent used AS TEXT (links, eyebrows, "Sign out"). --bc-accent on the dark
     panels measures 3.95-4.17:1, under WCAG AA's 4.5:1 for body text; this one
     is about 6:1 on --bc-bg-panel. Fills and borders keep --bc-accent. */
  --bc-accent-text:   #6e95f0;

  /* engineering status (independent of brand) */
  --bc-status-pass:    #35b46a;
  --bc-status-warning: #e3b53f;
  --bc-status-dev:     #e08a3c;
  --bc-status-error:   #e0533d;
  --bc-status-missing: #b061d6;
  --bc-status-unknown: #6e7686;
  --bc-status-info:    #3b8fe0;

  /* analysis heatmap ramp — SEPARATE from brand and from status, because a
     heatmap band is a measured magnitude, not a verdict about the project.
     Diverging blue(-) / green(in tolerance) / red(+) for signed distance. */
  --bc-heat-neg:  #3366f2;
  --bc-heat-warn: #f2cc33;
  --bc-heat-pass: #33bf59;
  --bc-heat-pos:  #e64040;
  --bc-heat-none: #5a6274;

  /* space */
  /* Opened up a step (Nov 2026): the old 4/6/8 px steps read as cramped on a
     site laptop. Everything that spaces through these tokens grows together. */
  --bc-space-1: 2px;  --bc-space-2: 6px;  --bc-space-3: 8px;  --bc-space-4: 12px;
  --bc-space-5: 16px; --bc-space-6: 20px; --bc-space-7: 28px; --bc-space-8: 36px;

  /* type scale. Nothing smaller than --bc-fs-xs: 10-11 px text was unreadable
     on a site laptop, and most of the UI sat at 12 px. */
  --bc-fs-xs: 12px; --bc-fs-sm: 13px; --bc-fs-md: 14px; --bc-fs-lg: 16px; --bc-fs-xl: 20px;

  /* radius / shadow / motion */
  --bc-radius-sm: 4px; --bc-radius-md: 6px; --bc-radius-lg: 10px;
  --bc-shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --bc-shadow-2: 0 6px 20px rgba(0,0,0,.45);
  --bc-shadow-3: 0 12px 40px rgba(0,0,0,.55);
  --bc-dur: 140ms; --bc-ease: cubic-bezier(.2,.6,.2,1);

  /* layout metrics */
  --bc-topbar-h: 52px; --bc-statusbar-h: 26px;
  --bc-toolbar-w: 72px; --bc-sidebar-w: 300px; --bc-rightpanel-w: 400px;

  /* fonts */
  --bc-font: "Inter", system-ui, "Segoe UI", Roboto, "Noto Sans Arabic", Tahoma, sans-serif;
  --bc-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* density: comfortable by default; compact for those who choose it */
  --bc-row-h: 38px; --bc-control-h: 32px;
}

:root[data-density="compact"] { --bc-row-h: 32px; --bc-control-h: 28px; --bc-fs-sm: 12.5px; --bc-fs-md: 13px; }
:root[data-density="comfortable"] { --bc-row-h: 40px; --bc-control-h: 34px; }

:root[data-theme="light"] {
  color-scheme: light;
  --bc-bg-workspace: #eef1f5;
  --bc-bg-panel:     #f7f9fc;
  --bc-bg-elevated:  #ffffff;
  --bc-bg-inset:     #eaeef3;
  --bc-bg-hover:     #e6ebf2;
  --bc-bg-selected:  #dbe6fb;
  --bc-border:        #d7dde6;
  --bc-border-strong: #c2cad6;
  --bc-text-primary:  #1a1f28;
  --bc-text-secondary:#495264;
  --bc-text-muted:    #79839a;
  --bc-text-disabled: #a6afbf;
  --bc-on-accent:     #ffffff;
  /* on the light panels the darker accent is the readable one (~5.6:1) */
  --bc-accent-text:   #2f5fc8;
  --bc-shadow-1: 0 1px 2px rgba(20,30,50,.10);
  --bc-shadow-2: 0 6px 20px rgba(20,30,50,.14);
  --bc-shadow-3: 0 12px 40px rgba(20,30,50,.20);
}