/* Short Commerce — colors. Dark is default. Add data-theme="light" on <html> or any container for the light theme.
   Tokens built from theme colors (gradients, aliases, mixes) sit in the last rule, so they recompute wherever a theme is set. */
:root {
  /* base */
  --sc-black: #0A0A0A;
  /* dark-theme surface ladder: lifted off pure black so cards separate from the page */
  --sc-ink-900: #0E100F;
  --sc-ink-850: #121513;
  --sc-ink-800: #181C19;
  --sc-ink-700: #1E2320;
  --sc-ink-600: #252B27;
  --sc-emerald: #00DF82;
  --sc-emerald-bright: #5DF0AB;
  --sc-forest: #03624C;
  --sc-forest-deep: #02352A;
  --sc-white: #FFFFFF;
  --sc-paper: #F4F4F2;
  --sc-paper-2: #ECEDE9;
  --sc-grey-100: #DBE3DE;
  --sc-grey-200: #CFD6D1;
  --sc-grey-300: #B8BFBA;
  --sc-grey-400: #9AA39D;
  --sc-grey-500: #5F6A63;
  --sc-grey-600: #4D564F;
  --sc-danger: #E05A5A;
  --sc-warn: #E0B25A;

  /* semantic — dark */
  --bg: var(--sc-ink-850);
  --bg-deep: var(--sc-ink-900);
  --surface: var(--sc-ink-800);
  --surface-2: var(--sc-ink-700);
  --surface-raised: var(--sc-ink-600);
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --control-border: rgba(255,255,255,0.40);  /* edge of a form control: 3:1 or better against every surface it sits on (WCAG 1.4.11) */
  --border-accent: rgba(0,223,130,0.35);
  --text: #FFFFFF;
  --text-2: var(--sc-grey-200);
  --text-3: var(--sc-grey-400);
  --text-muted: #727D76;                    /* grey-500 lifted to keep ≥4:1 on the lighter ladder */
  --accent: var(--sc-emerald);
  --accent-ink: var(--sc-emerald);          /* accent used AS text — passes on dark only */
  --accent-hover: var(--sc-emerald-bright);
  --on-accent: var(--sc-black);
  --glow: rgba(0,223,130,0.22);
  --glow-strong: rgba(0,223,130,0.9);
  --glow-forest: rgba(3,98,76,0.10);
  --danger: var(--sc-danger);
  --danger-fill: #B84A4A;                   /* solid danger pill: white on it is 5.1:1 (white on --danger is 3.6:1) */
  --warn: var(--sc-warn);
  --focus-ring: var(--accent);
}

[data-theme="light"] {
  --bg: var(--sc-paper);
  --bg-deep: var(--sc-paper-2);
  --surface: #FFFFFF;
  --surface-2: var(--sc-paper-2);
  --surface-raised: #FFFFFF;
  --border: rgba(10,10,10,0.08);
  --border-strong: rgba(10,10,10,0.18);
  --control-border: rgba(10,10,10,0.50);
  --border-accent: rgba(3,98,76,0.35);
  --text: var(--sc-black);
  --text-2: #2A2F2C;
  --text-3: var(--sc-grey-500);
  --text-muted: #7A847D;
  --accent: var(--sc-emerald);
  --accent-ink: var(--sc-forest);           /* 7.1:1 on paper */
  --accent-hover: #04795E;
  --on-accent: var(--sc-black);
  --glow: rgba(0,223,130,0.18);
  --glow-strong: rgba(0,223,130,0.6);
  --glow-forest: rgba(3,98,76,0.06);
  --warn: #8A5A00;
  --danger: #B23B3B;                        /* danger as text on paper: 5.2:1 (the dark-theme red is 3.3:1 here) */
  --danger-fill: var(--danger);
  --focus-ring: var(--sc-forest);           /* emerald is 1.6:1 on paper; forest keeps the focus ring visible */
}

/* Derived from theme colors: declared on every theme scope, so each one resolves against its own theme. */
:root, [data-theme] {
  --positive: var(--accent-ink);
  --negative: var(--text);
  --border-danger: color-mix(in srgb, var(--danger) 45%, transparent);
  --row-hover: color-mix(in srgb, var(--text) 5%, transparent);

  /* recurring gradients */
  --bg-glow-tr: radial-gradient(70% 30% at 88% 0%, var(--glow) 0%, var(--glow-forest) 38%, transparent 72%);
  --bg-glow-tl: radial-gradient(70% 60% at 0% 0%, var(--glow) 0%, var(--glow-forest) 42%, transparent 72%);
  --card-glow: radial-gradient(120% 160% at 100% 0%, var(--glow) 0%, var(--glow-forest) 48%, transparent 78%);
}