/* CBSS Brand Layer — extends CabinHub neutral substrate
 * Source: design/brand-tokens.json (Tokens Studio v2, OKLCH 11-step ramps)
 * Substrate: ~/CabinHub/design/tokens.json (read-only)
 *
 * ADDITIVE ONLY. Loaded BEFORE css/styles.css so existing rules win —
 * zero visual regression risk. New components opt-in by referencing
 * --brand-* custom properties.
 *
 * Do not edit directly — regenerate from tokens.
 *
 * S27-K v2.58.0 — 2026-05-21
 */

:root {
  /* ── Brand primary (blue, hue 252) — 11-step OKLCH ramp ──────────── */
  --brand-primary-50:  oklch(96.5% 0.027 252);
  --brand-primary-100: oklch(92.2% 0.05  252);
  --brand-primary-200: oklch(86.5% 0.085 252);
  --brand-primary-300: oklch(80%   0.12  252);
  --brand-primary-400: oklch(73%   0.16  252);
  --brand-primary-500: oklch(66%   0.18  252);
  --brand-primary-600: oklch(58%   0.19  252);
  --brand-primary-700: oklch(49%   0.18  252);
  --brand-primary-800: oklch(38%   0.15  252);
  --brand-primary-900: oklch(28%   0.10  252);
  --brand-primary-950: oklch(20%   0.06  252);

  /* ── Brand accent (purple, hue 295) ──────────────────────────────── */
  --brand-accent-50:  oklch(96% 0.03 295);
  --brand-accent-100: oklch(91% 0.06 295);
  --brand-accent-200: oklch(85% 0.10 295);
  --brand-accent-300: oklch(78% 0.14 295);
  --brand-accent-400: oklch(71% 0.17 295);
  --brand-accent-500: oklch(64% 0.20 295);
  --brand-accent-600: oklch(57% 0.21 295);
  --brand-accent-700: oklch(48% 0.19 295);
  --brand-accent-800: oklch(38% 0.15 295);
  --brand-accent-900: oklch(28% 0.10 295);
  --brand-accent-950: oklch(20% 0.06 295);

  /* ── Brand secondary (green, hue 152) ────────────────────────────── */
  --brand-secondary-50:  oklch(97% 0.03 152);
  --brand-secondary-100: oklch(93% 0.06 152);
  --brand-secondary-200: oklch(87% 0.10 152);
  --brand-secondary-300: oklch(80% 0.14 152);
  --brand-secondary-400: oklch(73% 0.17 152);
  --brand-secondary-500: oklch(65% 0.18 152);
  --brand-secondary-600: oklch(56% 0.16 152);
  --brand-secondary-700: oklch(47% 0.13 152);
  --brand-secondary-800: oklch(36% 0.10 152);
  --brand-secondary-900: oklch(27% 0.07 152);
  --brand-secondary-950: oklch(19% 0.04 152);

  /* ── Brand gradients ─────────────────────────────────────────────── */
  --brand-gradient-primary-accent: linear-gradient(135deg, var(--brand-primary-500) 0%, var(--brand-accent-500) 100%);
  --brand-gradient-subtle:         linear-gradient(135deg, oklch(66% 0.18 252 / 0.15) 0%, oklch(64% 0.20 295 / 0.10) 100%);

  /* ── Brand semantic aliases (dark-first defaults) ────────────────── */
  --brand-fg-on-dark:    var(--brand-primary-200);   /* text/icon on dark bg */
  --brand-fg-on-light:   var(--brand-primary-700);   /* text/icon on light bg */
  --brand-bg-tint:       var(--brand-primary-950);   /* subtle brand wash */
  --brand-border-tint:   var(--brand-primary-800);   /* subtle brand divider */
  --brand-focus-ring:    var(--brand-primary-400);   /* :focus-visible outline */

  /* ── Type pairings (Inter already loaded by index.html) ──────────── */
  --brand-font-display:  'Inter', system-ui, sans-serif;
  --brand-font-body:     'Inter', system-ui, sans-serif;
  --brand-font-mono:     ui-monospace, SFMono-Regular, 'DM Mono', monospace;
}

/* ── Light mode opt-in (dark is default) ───────────────────────────── */
[data-theme='light'] {
  --brand-fg-on-dark:   var(--brand-primary-700);
  --brand-fg-on-light:  var(--brand-primary-200);
  --brand-bg-tint:      var(--brand-primary-50);
  --brand-border-tint:  var(--brand-primary-200);
}

/* ── Helpful brand component classes ───────────────────────────────── */

.brand-gradient-text {
  background: var(--brand-gradient-primary-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-button-primary {
  background: var(--brand-primary-500);
  color: var(--brand-primary-50);
  border: 1px solid var(--brand-primary-600);
  border-radius: 8px;
  padding: 8px 16px;
  font-family: var(--brand-font-body);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.brand-button-primary:hover  { background: var(--brand-primary-600); }
.brand-button-primary:active { transform: translateY(1px); }
.brand-button-primary:focus-visible {
  outline: 2px solid var(--brand-focus-ring);
  outline-offset: 2px;
}

.brand-button-secondary {
  background: transparent;
  color: var(--brand-primary-300);
  border: 1px solid var(--brand-primary-700);
  border-radius: 8px;
  padding: 8px 16px;
  font-family: var(--brand-font-body);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.brand-button-secondary:hover {
  background: var(--brand-primary-900);
  color: var(--brand-primary-200);
}
.brand-button-secondary:focus-visible {
  outline: 2px solid var(--brand-focus-ring);
  outline-offset: 2px;
}

.brand-button-tertiary {
  background: transparent;
  color: var(--brand-primary-400);
  border: none;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: var(--brand-font-body);
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
}
.brand-button-tertiary:hover { color: var(--brand-primary-300); }
.brand-button-tertiary:focus-visible {
  outline: 2px solid var(--brand-focus-ring);
  outline-offset: 2px;
}

/* Brand-tinted surface (for hero blocks, AGI panels, etc.) */
.brand-surface {
  background: var(--brand-gradient-subtle);
  border: 1px solid var(--brand-border-tint);
  border-radius: 12px;
  padding: 16px;
}

/* Healthy / positive metric pill (uses secondary green) */
.brand-pill-positive {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: oklch(27% 0.07 152 / 0.4);
  color: var(--brand-secondary-300);
  border: 1px solid var(--brand-secondary-800);
  font-family: var(--brand-font-mono);
  font-size: 12px;
}