/*
 * Tartini AI design tokens — the ONLY source of colour, radius, shadow and type values.
 *
 * ONE SET. The `--tartini-*` palette below is the authority (the UI redesign's spec §26–§34, retuned by
 * the 2026-09-30 shadcn/ui redesign, then on 2026-10-09 to shadcn/ui's own NEUTRAL base colour and its
 * card shadow — the shadcn canvas `Tartini AI on shadcn/ui`); every
 * older name further down (`--purple`, `--border`, `--green-text`, …) is an ALIAS onto it, so a
 * component written against either vocabulary draws the same colour and nothing has a second copy
 * to drift. New code uses the `--tartini-*` / `--radius-*` / `--shadow-*` names.
 *
 * Purple is Tartini AI's primary action, the focus ring and the small mark on whatever is CURRENT or
 * SELECTED (the nav item, a tab, a row, a pressed choice) — never decoration and never a status. Text,
 * icons, links and hover states are neutral.
 * Status is green (connected / ready), orange (needs review / warning), red (failed / error), gray
 * (not connected / disabled) and a SEPARATE Unknown state: "we could not read it" is not
 * "not connected", and the two may never share a badge.
 *
 * Two literals stay literal on purpose: `--blue` is read by `overlay-visual-parity.test.js`, which
 * resolves exactly one level of `var()` to compare the Preview overlay with the bookmarklet, and the
 * chart palette is data encoding rather than chrome.
 */
:root {
  /* ── Brand ──────────────────────────────────────────────────────────────────────────────── */
  --tartini-purple-700: #5B21B6;
  --tartini-purple-600: #6D28D9;
  --tartini-purple-500: #7C3AED;
  --tartini-purple-400: #8B5CF6;
  --tartini-purple-300: #C4B5FD;
  --tartini-purple-200: #DDD6FE;

  /* Purple surfaces */
  --tartini-purple-100: #EDE9FE;
  --tartini-purple-50: #F5F3FF;
  --tartini-purple-soft: #F2EEFF;

  /* Blue surfaces */
  --tartini-blue-50: #EEF4FF;
  --tartini-blue-100: #E6EEFF;

  /* ── Neutrals ───────────────────────────────────────────────────────────────────────────── */
  --tartini-bg: #FFFFFF;
  --tartini-surface: #FFFFFF;
  /* A quiet neutral fill (chips, default buttons, inset panels) and the main rail's own ground. */
  --tartini-surface-muted: #F5F5F5;
  --tartini-sidebar-bg: #FAFAFA;
  --tartini-border: #E5E5E5;
  /* shadcn/ui has ONE border colour; the soft name stays so the rules that read it keep resolving. */
  --tartini-border-soft: #E5E5E5;

  --tartini-text: #0A0A0A;
  --tartini-text-body: #404040;
  --tartini-text-secondary: #737373;
  --tartini-text-muted: #A3A3A3;

  /* ── Status: success ────────────────────────────────────────────────────────────────────── */
  --tartini-green: #16A34A;
  --tartini-green-text: #15803D;
  --tartini-green-bg: #ECFDF3;
  --tartini-green-border: #BBF7D0;

  /* ── Status: warning ────────────────────────────────────────────────────────────────────── */
  --tartini-orange: #F59E0B;
  --tartini-orange-text: #C2410C;
  --tartini-orange-bg: #FFF7ED;
  --tartini-orange-border: #FED7AA;

  /* ── Status: error ──────────────────────────────────────────────────────────────────────── */
  --tartini-red: #DC2626;
  --tartini-red-text: #B91C1C;
  --tartini-red-bg: #FEF2F2;
  --tartini-red-border: #FECACA;

  /* ── Status: not connected / disabled (gray) and UNKNOWN (its own state) ─────────────────── */
  --tartini-neutral-text: #737373;
  --tartini-neutral-bg: #FAFAFA;
  --tartini-neutral-border: #E5E5E5;
  --tartini-unknown-text: #525252;
  --tartini-unknown-bg: #F5F5F5;
  --tartini-unknown-border: #D4D4D4;

  /* ── Radius (four sizes and a pill; nothing else): a control 8, an inner panel 10, a dialog 12, a card 14 ─ */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* ── Shadow ─────────────────────────────────────────────────────────────────────────────── */
  /* A card is shadcn/ui's Card: a 1px border and its `shadow-sm` — the same at rest and on hover, so a card
     never loses its shadow when the pointer or a field inside it takes focus. `--shadow-xs` is the
     outline button's and the input's (shadcn `shadow-xs`). */
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-card-hover: var(--shadow-card);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  /* Menus, popovers, dialogs and the one product preview: very light and neutral. */
  --shadow-pop: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.06);

  /* ── Focus ──────────────────────────────────────────────────────────────────────────────── */
  --focus-ring-color: rgba(124, 58, 237, 0.55);
  --focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.22);

  /* ── Typography (no web font is loaded; Inter is used where the system already has it) ──── */
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Code", monospace;
  --type-hero-size: 42px;
  --type-hero-line: 1.08;
  --type-hero-weight: 650;
  --type-hero-tracking: -0.035em;
  --type-title-size: 32px;
  --type-title-weight: 650;
  --type-title-tracking: -0.025em;
  --type-body-size: 14px;
  --type-body-line: 1.55;
  --type-sm-size: 13px;
  --type-xs-size: 12px;

  /* ── Layout ─────────────────────────────────────────────────────────────────────────────── */
  --sidebar-width: 260px;
  --conversation-max-width: 1120px;
  --agent-panel-width: 460px;

  /* ── Semantic layer (shadcn/ui names; DESIGN.md §3b). New code reads these. ──────────────────────────
     Only names that do not already mean something else here: `--muted` is a TEXT colour in this
     codebase (an alias below) and `--radius` is the card radius, so shadcn's surface `muted` is
     spelled `--accent`/`--secondary` and its text `muted-foreground` is spelled out. */
  --background: var(--tartini-surface);
  --foreground: var(--tartini-text);
  --foreground-2: var(--tartini-text-body);
  --primary: var(--tartini-purple-600);
  --primary-hover: var(--tartini-purple-700);
  --primary-foreground: #FFFFFF;
  --secondary: var(--tartini-surface-muted);
  --secondary-foreground: var(--tartini-text);
  --accent: var(--tartini-surface-muted);
  --accent-foreground: var(--tartini-text);
  --muted-foreground: var(--tartini-text-secondary);
  --input: var(--tartini-border);
  --border-strong: #D4D4D4;
  --ring: var(--tartini-purple-500);
  --destructive: var(--tartini-red);
  --popover: var(--tartini-surface);
  --sidebar: var(--tartini-sidebar-bg);
  /* The faint tint of a SELECTED row or a pressed choice. */
  --brand-tint: var(--tartini-purple-50);
  /* TARTINI AI'S MARK, the ✦ sparkle: brand colour wherever it stands for Tartini AI — the AI
     Workspace's hero, the panel's title and rail button, each reply's avatar, a generated thing's
     tag — before a conversation and during it. Its tile, where it has one, is the faint tint. */
  --brand-mark: var(--tartini-purple-500);
  --brand-mark-tint: var(--tartini-purple-50);
  --radius-control: var(--radius-sm);
  --radius-panel: var(--radius-md);
  --radius-feature: var(--radius-lg);

  /* ════════════════════════════════════════════════════════════════════════════════════════
     THE OLDER NAMES, aliased onto the set above. Existing components read these; keep them.
     ════════════════════════════════════════════════════════════════════════════════════════ */

  /* Surfaces */
  --white: #ffffff;
  --app-bg: var(--tartini-bg);
  --surface: var(--tartini-surface-muted);
  --card: var(--tartini-surface);
  --border: var(--tartini-border);
  --border-soft: var(--tartini-border-soft);

  /* Text */
  --text: var(--tartini-text);
  --text-2: var(--tartini-text-body);
  --muted: var(--tartini-text-secondary);
  --placeholder: var(--tartini-text-muted);

  /* Brand purple (AI / primary). Hover is DARKER (700), as the spec asks. */
  --purple: var(--tartini-purple-600);
  --purple-hover: var(--tartini-purple-700);
  --purple-soft: var(--tartini-purple-soft);
  --purple-border: var(--tartini-purple-200);

  /* AI gradient stops */
  --lavender: var(--tartini-purple-100);
  --violet: var(--tartini-purple-200);
  --mint: #dff7ea;
  --cream: #fff7d6;

  /* Action orange (the Tracking review actions that predate the redesign) */
  --orange: #f97316;
  --orange-soft: var(--tartini-orange-bg);
  --orange-border: var(--tartini-orange-border);

  /* Semantic */
  --green: var(--tartini-green);
  --green-soft: var(--tartini-green-bg);
  --green-text: var(--tartini-green-text);
  --amber: var(--tartini-orange);
  --amber-soft: var(--tartini-orange-bg);
  --amber-border: var(--tartini-orange-border);
  --amber-text: var(--tartini-orange-text);
  --red: var(--tartini-red);
  --red-soft: var(--tartini-red-bg);
  --red-text: var(--tartini-red-text);
  --red-border: var(--tartini-red-border);
  --blue: #2563eb;

  /* Chart palette */
  --chart-purple: #7c3aed;
  /* The far end of a bar's vertical ramp: the same hue, lighter, so a bar reads as one shape. */
  --chart-purple-soft: #a78bfa;
  --chart-blue: #2563eb;
  --chart-orange: #f97316;
  --chart-green: #10b981;
  --chart-grid: #E5E5E5;

  /* Radius / shadow / type */
  --radius: var(--radius-md);
  --shadow-sm: var(--shadow-card);
  --shadow-md: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.05);
  --shadow-lg: var(--shadow-pop);
  --mono: var(--font-mono);
  --sans: var(--font-sans);

  --sidebar-w: var(--sidebar-width);
  color-scheme: light;
}