/* Xaint colors.
   TWO surfaces, one brand accent:
   1. PRODUCT (default, light): white cards on a cool grey canvas, near-black
      navy chrome, BLUE for interactive affordances, GOLD for brand + AI.
   2. BRAND/DARK (.xaint-dark): the dark-first palette of the Color System v2
      document — used for marketing, decks, hero panels and app chrome.
   Hexes sampled from the product screenshots; ramps from the v2 doc. */
:root{
  /* Gold ramp — brand = 400 (Aurum) */
  --gold-50:#FCF5E2;--gold-100:#F9E9C2;--gold-200:#F4D78E;--gold-300:#F0C75F;
  --gold-400:#F3B43B;--gold-500:#DC9C22;--gold-600:#C0800C;--gold-700:#94620C;
  --gold-800:#6B4607;--gold-900:#422B03;
  --gold-soft:#FFD588;
  --gold-tint:#FCF4E0;      /* gold wash on light surfaces */

  /* Ink ramp — navy neutrals */
  --ink-00:#FFFFFF;--ink-25:#FCFCFD;--ink-50:#F4F4F8;--ink-75:#F0F0F4;
  --ink-100:#E4E4EC;--ink-150:#C7CCDA;--ink-200:#94A3B8;--ink-300:#64748B;
  --ink-400:#475569;--ink-500:#1F2430;--ink-600:#11162A;--ink-700:#080C18;

  /* Action blue — every interactive affordance in the product */
  --blue-500:#1874D0;--blue-400:#2094F4;--blue-600:#155FAC;
  --blue-tint:#E4F0FC;

  /* Status */
  --green-500:#10B880;--green-tint:#E0F4F0;
  --amber-500:#F49C0C;--amber-tint:#FCF4E0;
  --red-500:#E84434;--red-tint:#FDE8E4;
  --slate-500:#64748B;--slate-tint:#E4E8F0;

  /* Avatar fills (initials) — rotate by name */
  --av-1-bg:#C4C8E8;--av-1-fg:#3E4380;
  --av-2-bg:#FCE0B0;--av-2-fg:#A56A08;
  --av-3-bg:#CFE5FA;--av-3-fg:#155FAC;
  --av-4-bg:#A7E8CF;--av-4-fg:#0A7A55;
  --av-5-bg:#E9CDF4;--av-5-fg:#7A3E93;

  /* Charts */
  --viz-1:#F3B43B;--viz-2:#080C18;--viz-3:#F49C0C;
  --viz-4:#F2455B;--viz-5:#4C6FEF;--viz-6:#10B880;

  /* ---- Product semantics (use these) ---- */
  --color-bg:var(--ink-75);            /* app canvas */
  --color-surface:#FFFFFF;             /* cards, sheets */
  --color-surface-2:#F8F8FA;           /* inner wells, task rows */
  --color-surface-3:var(--ink-50);     /* chips, search fields */
  --color-chrome:var(--ink-700);       /* top bar, primary buttons */
  --color-chrome-2:var(--ink-500);     /* raised pills on chrome */
  --color-border:var(--ink-100);       /* card + chip borders */
  --color-hairline:rgba(8,12,24,0.07);
  --color-rule:#E8E8EE;                /* light row divider */
  --color-rule-strong:#1B2230;         /* the app's dark 1px detail rule */

  --color-text:#0F1724;                /* headings */
  --color-text-secondary:var(--ink-400);
  --color-text-muted:var(--ink-300);
  --color-text-faint:var(--ink-200);
  --color-on-chrome:#FFFFFF;
  --color-on-chrome-muted:#8A94B2;

  --color-brand:var(--gold-400);       /* brand + AI, on dark or as fill */
  --color-brand-hover:var(--gold-500);
  --color-brand-on-light:var(--gold-600); /* gold text on white (AA) */
  --color-on-brand:#3A2702;

  --color-action:var(--blue-500);       /* links, tabs, blue buttons */
  --color-action-hover:var(--blue-600);
  --color-action-soft:var(--blue-400);
  --color-action-tint:var(--blue-tint);

  --color-success:var(--green-500);--color-success-tint:var(--green-tint);
  --color-warning:var(--amber-500);--color-warning-tint:var(--amber-tint);
  --color-danger:var(--red-500);--color-danger-tint:var(--red-tint);
  --color-neutral:var(--slate-500);--color-neutral-tint:var(--slate-tint);

  --color-focus:var(--gold-400);
  --color-overlay:rgba(8,12,24,0.45);
}

/* The dark brand surface: app chrome, hero panels, decks, marketing.
   Apply to any container to flip the semantics. */
.xaint-dark{
  --color-bg:var(--ink-700);
  --color-surface:var(--ink-600);
  --color-surface-2:#1A2138;
  --color-surface-3:#161C33;
  --color-border:#2E3550;
  --color-hairline:rgba(255,255,255,0.08);
  --color-rule:rgba(255,255,255,0.08);
  --color-rule-strong:rgba(255,255,255,0.14);
  --color-text:#FFFFFF;
  --color-text-secondary:var(--ink-150);
  --color-text-muted:#8A94B2;
  --color-text-faint:#5A6480;
  --color-brand:var(--gold-400);
  --color-brand-on-light:var(--gold-400);
  --color-action:var(--blue-400);
  --color-action-tint:rgba(32,148,244,0.16);
  --color-success-tint:rgba(16,184,128,0.14);
  --color-warning-tint:rgba(244,156,12,0.14);
  --color-danger-tint:rgba(232,68,52,0.14);
  --color-neutral-tint:rgba(100,116,139,0.18);
  --color-overlay:rgba(8,12,24,0.72);
}