/* Integra Workbench — design tokens
 *
 * Two tiers:
 *   1. Primitives — raw ramps. Never referenced by component CSS.
 *   2. Semantic   — role-named tokens. The only tier style.css may use.
 *
 * All hex literals in the web app live in this file (enforced by
 * tools/css_gate.sh). Theme switching overrides the semantic tier only,
 * via :root[data-theme="dark"].
 *
 * Brand palette (extracted from the Integrel logo):
 *   primary dark charcoal #303838 (desaturated dark slate, slight teal cast)
 *   brand accent magenta  #e73389 / #e84090
 */

:root {
  /* ── Primitives: charcoal/slate ramp (tinted toward #303838) ── */
  --charcoal-50:  #f4f6f6;
  --charcoal-100: #e8ecec;
  --charcoal-200: #d3dada;
  --charcoal-300: #b3bdbd;
  --charcoal-400: #93a0a0;
  --charcoal-500: #687474;
  --charcoal-600: #515c5c;
  --charcoal-700: #414a4a;
  --charcoal-800: #303838; /* brand primary */
  --charcoal-850: #232929;
  --charcoal-900: #1a2020;
  --charcoal-950: #121717;

  /* ── Primitives: magenta ramp (brand accent #e73389) ── */
  --magenta-50:  #fdf2f7;
  --magenta-100: #fce5f0;
  --magenta-200: #f9c5de;
  --magenta-300: #f49cc6;
  --magenta-400: #ee64a4;
  --magenta-500: #e73389; /* brand accent */
  --magenta-600: #cc2374;
  --magenta-700: #a91c60;
  --magenta-800: #8b1a50;
  --magenta-900: #6d1740;

  /* ── Primitives: gray-blue ramp (waiting) ── */
  --grayblue-50:  #f5f7fa;
  --grayblue-100: #e9edf3;
  --grayblue-200: #d4dce6;
  --grayblue-300: #b4c1d2;
  --grayblue-400: #9badc4;
  --grayblue-500: #6c7f99;
  --grayblue-600: #56677e;
  --grayblue-700: #475568;
  --grayblue-800: #343f4e;
  --grayblue-900: #242c38;

  /* ── Primitives: red ramp (fault) ── */
  --red-50:  #fdf3f2;
  --red-100: #fbe2e0;
  --red-200: #f6c4c1;
  --red-300: #e8938d;
  --red-400: #e36c65;
  --red-500: #d34a42;
  --red-600: #b73730;
  --red-700: #962c27;
  --red-800: #5c2f2c;
  --red-900: #3a2422;

  /* ── Primitives: amber ramp (warning) ── */
  --amber-50:  #fdf8ec;
  --amber-100: #faefd2;
  --amber-200: #f4dda4;
  --amber-300: #d9b25e;
  --amber-400: #dca93c;
  --amber-500: #c08a1d;
  --amber-600: #9d6f14;
  --amber-700: #7d5811;
  --amber-800: #54431c;
  --amber-900: #382e18;

  /* ── Primitives: green ramp (resolved / positive) ── */
  --green-50:  #f0f7f0;
  --green-100: #e6f2e6;
  --green-200: #c8e2c8;
  --green-300: #8fbf8f;
  --green-400: #6aa66a;
  --green-500: #4d8a4d;
  --green-600: #3d7a3d;
  --green-700: #356b35;
  --green-800: #294029;
  --green-900: #1f2e1f;

  /* ── Non-color primitives ── */
  /* IBM Plex (vendored, @font-face in style.css) gives the workbench an engineered,
     instrument-panel character; system stacks remain as the offline fallback. */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo,
               Consolas, "Liberation Mono", monospace;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;

  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  /* Reading scale (IW-102): assistant prose is the one surface an operator reads for
     minutes at a time, so it sits a step above the chrome around it and takes a looser
     leading. The measure caps the line length independently of the pane width; a full
     1600px line is unreadable no matter how good the leading is. */
  --font-size-prose: 15px;
  --line-height-prose: 1.65;
  --measure-prose: 68ch;
  /* Code samples and data tables need more room than running text but still a bound: a
     fenced block spanning a 1600px pane makes the prose above it look like a column in
     someone else's layout. */
  --measure-wide: 92ch;

  /* Motion (IW-102 U6): one duration and one curve for the whole chat surface, so
     entrances and state cross-fades read as the same gesture rather than a collection
     of separately tuned effects. */
  --motion-enter: 140ms;
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);

  --radius-sm: 4px;
  --radius-md: 6px;

  /* Shell layout (redesign U3) */
  --rail-width: 280px;
  --rail-width-collapsed: 56px;
  --header-height: 48px;
}

/* ════════════════════════════════════════════════════════════════════
 * Semantic tier — light theme (default)
 * ════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  /* Backgrounds */
  --color-bg-page:     var(--charcoal-50);
  --color-bg-surface:  #ffffff;
  --color-bg-raised:   #ffffff;
  --color-bg-hover:    var(--charcoal-100);
  --color-bg-selected: var(--magenta-50);
  --color-bg-code:     var(--charcoal-100);
  --color-bg-inverse:  var(--charcoal-800);

  /* Text */
  --color-text-primary:   var(--charcoal-850);
  --color-text-secondary: var(--charcoal-700);
  --color-text-muted:     var(--charcoal-600);
  --color-text-inverse:   #ffffff;
  --color-text-on-accent: #ffffff;
  --color-text-on-status: #ffffff;

  /* Borders */
  --color-border-subtle: var(--charcoal-200);

  /* Ledger (IW-102): the hairline running down an assistant turn, and the tick that
     marks each block on it. The tick is the one place the brand accent appears inside
     the transcript, and it means "the agent acted" — never decoration. It is a separate
     role from the accent because it must stay quieter than an interactive element. */
  --color-ledger-rail: var(--charcoal-300);
  --color-ledger-tick: var(--magenta-400);

  /* Elevation (raised surfaces: floating panels, popovers) */
  --shadow-raised: 0 4px 14px rgba(20, 22, 26, 0.14);

  /* Accent (interactive / selected only) */
  --color-accent:       var(--magenta-600);
  --color-accent-hover: var(--magenta-700);

  /* Status (color + tint pair) */
  --color-status-fault:       var(--red-600);
  --color-status-fault-bg:    var(--red-100);
  --color-status-warning:     var(--amber-700);
  --color-status-warning-bg:  var(--amber-100);
  --color-status-waiting:     var(--grayblue-600);
  --color-status-waiting-bg:  var(--grayblue-100);
  --color-status-resolved:    var(--green-700);
  --color-status-resolved-bg: var(--green-100);
}

/* ════════════════════════════════════════════════════════════════════
 * Semantic tier — dark theme overrides (semantic tokens only)
 * Lightness elevation: page < surface < raised. Off-white text,
 * desaturated accent and status hues.
 * ════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Backgrounds */
  --color-bg-page:     var(--charcoal-950);
  --color-bg-surface:  var(--charcoal-900);
  --color-bg-raised:   var(--charcoal-850);
  --color-bg-hover:    var(--charcoal-800);
  --color-bg-selected: #3b2233;
  --color-bg-code:     var(--charcoal-850);
  --color-bg-inverse:  var(--charcoal-900);

  /* Text */
  --color-text-primary:   #e8eaed;
  --color-text-secondary: var(--charcoal-300);
  --color-text-muted:     var(--charcoal-400);
  --color-text-inverse:   #e8eaed;
  --color-text-on-accent: var(--charcoal-950);
  --color-text-on-status: var(--charcoal-950);

  /* Borders */
  --color-border-subtle: var(--charcoal-800);

  /* Ledger (IW-102) */
  --color-ledger-rail: var(--charcoal-700);
  --color-ledger-tick: var(--magenta-500);

  /* Elevation (deeper shadow reads against dark surfaces) */
  --shadow-raised: 0 4px 14px rgba(0, 0, 0, 0.5);

  /* Accent (desaturated a step in dark) */
  --color-accent:       #e87fb0;
  --color-accent-hover: #f0a1c6;

  /* Status (lighter, desaturated; tints are dark) */
  --color-status-fault:       var(--red-300);
  --color-status-fault-bg:    var(--red-900);
  --color-status-warning:     var(--amber-300);
  --color-status-warning-bg:  var(--amber-900);
  --color-status-waiting:     var(--grayblue-400);
  --color-status-waiting-bg:  var(--grayblue-900);
  --color-status-resolved:    var(--green-300);
  --color-status-resolved-bg: var(--green-900);
}