/**
 * Analicit FA design tokens — single source for chat / full / compact widgets.
 * Semantic names aligned with Bazar UIKit roles (see docs/ae-tokens-map.md).
 * Short aliases (--accent, --t1, …) kept for back-compat with existing CSS.
 *
 * Apply on: :root, .ae-analysis, .ac-mobile-host, and compact :host
 * (:host is for shadow-adopted sheet; light DOM ignores unknown :host in some engines)
 */
:root,
.ae-analysis,
.ac-mobile-host,
:host {
  /* ── Bazar-aligned semantic ── */
  --ae-color-primary: #8c50f6;
  --ae-color-primary-hover: #7e48de;
  --ae-color-primary-soft: #f3edfe;   /* ~ primary-10 */
  --ae-color-primary-softer: #faf7fe; /* ~ primary-5 */
  --ae-color-primary-muted: color-mix(in srgb, var(--ae-color-primary) 12%, transparent);

  --ae-color-surface: #ffffff;
  --ae-color-surface-soft: #f6f6f6; /* Figma container/bg/secondary page fill */
  --ae-color-surface-muted: #f5f5f5;

  --ae-color-border: #e4e4e4; /* Figma border/primary */

  --ae-color-text: #1a1a1a;
  --ae-color-text-secondary: #555555;
  --ae-color-text-tertiary: rgba(0, 0, 0, 0.5); /* Figma font/tertiary */
  --ae-color-text-on-primary: #ffffff;

  --ae-color-success: #00b70f; /* Figma growth badge */
  --ae-color-success-bg: #f0fdf4;
  --ae-color-danger: #f52222; /* Figma font/error */
  --ae-color-danger-bg: #fef2f2;
  --ae-color-danger-border: #fecaca;
  --ae-color-warning: #d97706;
  --ae-color-warning-bg: #fffbeb;

  /* info / instrument accents (badges, futures, OI) */
  --ae-color-info: #0891b2;
  --ae-color-info-bg: color-mix(in srgb, #0891b2 8%, transparent);
  --ae-color-info-border: color-mix(in srgb, #0891b2 15%, transparent);
  --ae-color-indigo: #818cf8;
  --ae-color-indigo-bg: color-mix(in srgb, #818cf8 12%, transparent);
  --ae-color-indigo-deep: #4338ca;
  --ae-color-indigo-soft: color-mix(in srgb, #6366f1 6%, transparent);
  --ae-color-indigo-border: color-mix(in srgb, #6366f1 15%, transparent);
  --ae-color-amber-deep: #92400e;
  --ae-color-amber-soft: color-mix(in srgb, #b45309 5%, transparent);
  --ae-color-amber-border: color-mix(in srgb, #b45309 12%, transparent);
  --ae-color-neutral-mid: #c4c8cf;
  --ae-color-neutral-lean: #7c7f88;
  --ae-color-stop: #ff6a6a;

  /* model bar gradient stops */
  --ae-color-mdl-low: #fde8e8;
  --ae-color-mdl-mid: #fdf0dd;
  --ae-color-mdl-high: #e7f6ec;

  /* chart / MA (display only) */
  --ae-color-chart-up: #16a34a;
  --ae-color-chart-down: #dc2626;
  --ae-color-chart-ma20: #fbbf24;
  --ae-color-chart-ma50: #818cf8;
  --ae-color-chart-grid: #f0f0f0;
  --ae-color-chart-text: #999999;

  /* Figma web FA: Roboto body + Montserrat headlines */
  --ae-font-ui: "Roboto", system-ui, -apple-system, sans-serif;
  --ae-font-display: "Montserrat", "Roboto", system-ui, sans-serif;
  --ae-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --ae-radius-pill: 999px;
  --ae-radius-card: 16px;
  --ae-radius-tile: 14px;
  --ae-radius-control: 12px;
  --ae-radius-input: 16px; /* Figma Fin_anallyst/Input */
  --ae-radius-menu: 18px;
  --ae-radius-chip: 22px;

  --ae-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
  --ae-shadow-soft: 0 1px 4px rgba(0, 0, 0, 0.06);
  --ae-shadow-input: 0 2px 10px rgba(0, 0, 0, 0.06);
  --ae-shadow-input-focus: 0 4px 28px rgba(0, 0, 0, 0.12);
  --ae-shadow-menu: 0 8px 30px rgba(0, 0, 0, 0.13);
  --ae-shadow-chip: 0 1px 4px rgba(0, 0, 0, 0.07);
  --ae-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ae-color-primary) 10%, transparent);

  --ae-compact-height: 254px;
  --ae-compact-pad-y: 14px;
  --ae-compact-pad-x: 16px;
  --ae-content-max: 640px; /* Figma Fin content width */
  --ae-radius-hl: 10px;

  --ae-space-1: 4px;
  --ae-space-2: 8px;
  --ae-space-3: 12px;
  --ae-space-4: 16px;
  --ae-space-5: 20px;
  --ae-space-6: 24px;

  /* ── Short aliases (existing CSS) ── */
  --accent: var(--ae-color-primary);
  --bg: var(--ae-color-surface-soft);
  --bg2: var(--ae-color-surface);
  --bg3: var(--ae-color-surface-muted);
  --line: var(--ae-color-border);
  --t1: var(--ae-color-text);
  --t2: var(--ae-color-text-secondary);
  --t3: var(--ae-color-text-tertiary);
  --green: var(--ae-color-success);
  --red: var(--ae-color-danger);
  --amber: var(--ae-color-warning);
  --font: var(--ae-font-ui);
  --mono: var(--ae-font-mono);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}