/* Colors — Commerce OS
   Base palette + semantic aliases. All values in hex/oklch derived from the
   three brand anchors: primary #036ce5, text #232d4b, surface #eef3fb. */

:root {
  /* ---- Brand: azure primary ---- */
  --brand-500: #036ce5;   /* primary — buttons, links-active, focus */
  --brand-600: #025bc4;   /* hover */
  --brand-700: #024ba3;   /* active / pressed */
  --brand-400: #3b8bec;   /* lighter accent */
  --brand-300: #8bbcf5;   /* disabled-ish, borders */
  --brand-100: #d9e8fc;   /* soft fill */
  --brand-50:  #eef3fb;   /* card surface / tint */

  /* ---- Ink: navy neutral ramp ---- */
  --ink-900: #171d31;
  --ink-800: #232d4b;   /* primary text */
  --ink-700: #3a4361;
  --ink-600: #5b6478;   /* secondary text */
  --ink-500: #808aa0;   /* muted / placeholder */
  --ink-400: #a7afc0;
  --ink-300: #c8cedb;   /* borders (strong) */
  --ink-200: #e1e6f0;   /* borders / dividers */
  --ink-100: #eef1f7;   /* subtle fill */
  --ink-50:  #f6f8fc;   /* app background tint */
  --white:   #ffffff;

  /* ---- Semantic accents ---- */
  --success-500: #1f9d6b;
  --success-50:  #e6f6ef;
  --warning-500: #e8963a;
  --warning-50:  #fdf1e4;
  --danger-500:  #e5484d;
  --danger-50:   #fdeaea;
  --info-500:    var(--brand-500);
  --info-50:     var(--brand-50);

  /* ---- AI accent (generative UI moments — use sparingly) ---- */
  --ai-gradient: linear-gradient(135deg, #036ce5 0%, #5aa0f2 100%); /* @kind color */
  --ai-glow: 0 0 0 1px rgba(3,108,229,.25), 0 8px 28px rgba(3,108,229,.22);

  /* ==== Semantic aliases ==== */
  --color-bg: var(--white);
  --color-bg-subtle: var(--ink-50);
  --color-surface: var(--white);
  --color-surface-card: var(--brand-50);
  --color-surface-inset: var(--ink-100);

  --color-text: var(--ink-800);
  --color-text-secondary: var(--ink-600);
  --color-text-muted: var(--ink-500);
  --color-text-on-brand: var(--white);
  --color-text-link: var(--ink-800);

  --color-primary: var(--brand-500);
  --color-primary-hover: var(--brand-600);
  --color-primary-active: var(--brand-700);

  --color-border: var(--ink-200);
  --color-border-strong: var(--ink-300);
  --color-focus-ring: rgba(3,108,229,.35);
}