/*
  Verapay design tokens.
  Base palette values were supplied as the product's starting foundation.
  Where a supplied value failed WCAG AA for its intended use (body text,
  functional borders), an accessible alternative is defined instead and
  noted inline — see comments below.

  Each color is defined twice: as a hex value (for direct CSS/SVG use,
  e.g. fill="var(--color-brand)") and as an "R G B" channel triple (so
  Tailwind's bg-brand/40-style opacity modifiers can compose alpha via
  rgb(var(--color-brand-rgb) / <alpha>)). Keep both in sync when changing
  a color.
*/

:root {
  /* Aurora Modern theme (2026-09-26): light, energetic — violet brand with a
     cyan companion accent, soft tinted status fills, rounded surfaces. Every
     text/fill pair below is checked for WCAG AA (ratios inline). */

  /* ---- Typography ---- */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  /* ---- Text ---- */
  --color-text-primary: #1b1d2a;        /* ~16:1 on white */
  --color-text-primary-rgb: 27 29 42;
  --color-text-secondary: #5b6078;      /* ~6.2:1 on white, ~5.6:1 on the page ground */
  --color-text-secondary-rgb: 91 96 120;
  --color-text-tertiary: #5b3be8;       /* links / emphasis, ~6.4:1 on white */
  --color-text-tertiary-rgb: 91 59 232;
  --color-text-inverse: #f8f9ff;
  --color-text-inverse-rgb: 248 249 255;

  /* ---- Surfaces ---- */
  --color-surface-base: #f3f4fa;        /* page ground — cards float on it */
  --color-surface-base-rgb: 243 244 250;
  --color-surface-muted: #f6f7fc;       /* hover fills, table heads, skeletons */
  --color-surface-muted-rgb: 246 247 252;
  --color-surface-raised: #ffffff;      /* cards, inputs, modals, menus */
  --color-surface-raised-rgb: 255 255 255;
  --color-surface-strong: #1b1d2a;      /* code blocks, tooltips, dark panels */
  --color-surface-strong-rgb: 27 29 42;

  /* ---- Borders ---- */
  --color-border-default: #eceef5;      /* decorative dividers only */
  --color-border-default-rgb: 236 238 245;
  --color-border-strong: #c9cddc;       /* functional edges: inputs, outlined buttons */
  --color-border-strong-rgb: 201 205 220;

  /* ---- Brand ---- */
  --color-brand: #6d4aff;               /* white text on it ~5.2:1 */
  --color-brand-rgb: 109 74 255;
  --color-brand-emphasis: #4b2fd6;      /* hover/active, white text ~7.5:1 */
  --color-brand-emphasis-rgb: 75 47 214;
  --color-brand-muted: #f1edff;         /* selected/active tint */
  --color-brand-muted-rgb: 241 237 255;
  /* Companion accent — gradients and the second chart series only, never
     a status meaning. */
  --color-accent: #0ea5c6;
  --color-accent-rgb: 14 165 198;
  --gradient-aurora: radial-gradient(120% 140% at 0% 0%, #7b5cff 0%, #4b2fd6 45%, #1b8fb8 100%);

  /* ---- Status (text on its own -bg passes AA) ---- */
  --color-success: #15803d;
  --color-success-rgb: 21 128 61;
  --color-success-bg: #e3f7ec;
  --color-danger: #be123c;
  --color-danger-rgb: 190 18 60;
  --color-danger-bg: #ffe4e8;
  --color-warning: #b45309;
  --color-warning-rgb: 180 83 9;
  --color-warning-bg: #fff1d6;
  --color-info: #0e7490;
  --color-info-rgb: 14 116 144;
  --color-info-bg: #ddf5fb;
  --color-neutral: #475569;
  --color-neutral-rgb: 71 85 105;
  --color-neutral-bg: #eef0f5;

  /* ---- Shadows ---- */
  --shadow-card: 0 1px 2px rgba(27, 29, 42, 0.04), 0 12px 32px rgba(27, 29, 42, 0.08);
  --shadow-soft: 0 1px 2px rgba(27, 29, 42, 0.04), 0 8px 24px rgba(27, 29, 42, 0.05);

  /* ---- Motion ---- */
  --duration-instant: 200ms;
  --duration-fast: 300ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
  }
}