/**
 * SwiftGigs design tokens — single source of truth for color.
 * Light/dark: hooks existing body.light / html.light / html[data-qg-theme].
 * Tasker/Poster: hooks html[data-qg-mode="worker"|"poster"] (worker = tasker)
 *                and html[data-mode="tasker"|"poster"] / body.qg-mode-*.
 *
 * The 11 core tokens are authoritative. Everything below them is an alias kept
 * so existing page CSS keeps resolving — do not delete aliases without grepping.
 * Component primitives live in qg-swift.css, not here.
 */
:root {
  /* ── Core palette (dark is the default theme) ── */
  --bg: #0B0A14;
  --surface: #16131F;
  --surface-alt: #201C2C;
  --border: #2C2740;
  --text: #F4F0FA;
  --text-muted: #9C93AC;
  --primary: #8B5CF6;
  --primary-text: #FFFFFF;
  --teal: #2DD4BF;
  --teal-tint: #123832;
  --green: #4ADE80;

  /* ── Semantic accents (not part of the redesign spec, values unchanged) ── */
  --attention: #fbbf24;
  --danger: #f87171;

  /* ── Flow accents ──
   * Posting flow = purple, earning flow = teal.
   * NOTE: this inverts the previous mapping, where tasker was purple and
   * poster was teal. Flip these two lines to revert. */
  --accent-poster: var(--primary);
  --accent-tasker: var(--teal);
  --accent: var(--accent-tasker);

  /* ── Derived structure ── */
  --line-strong: color-mix(in srgb, var(--border) 60%, var(--text-muted));
  --text-secondary: color-mix(in srgb, var(--text) 72%, var(--text-muted));

  /* ── Fills ──
   * CTAs are flat in this design. The gradient vars are kept as single-stop
   * gradients so existing `background: var(--grad-accent)` rules render flat
   * instead of needing 37 stylesheets edited. */
  --grad-tasker: linear-gradient(var(--accent-tasker), var(--accent-tasker));
  --grad-poster: linear-gradient(var(--accent-poster), var(--accent-poster));
  --grad-accent: linear-gradient(var(--accent), var(--accent));

  /* Wordmark only — never use for surfaces or buttons. */
  --grad-wordmark: linear-gradient(100deg, var(--primary) 0%, var(--teal) 100%);

  /* Soft fills (derive automatically from the core tokens) */
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --money-soft: color-mix(in srgb, var(--green) 14%, transparent);
  --attention-soft: color-mix(in srgb, var(--attention) 14%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 14%, transparent);

  /* ── Aliases for existing page CSS ── */
  --brand: var(--primary);
  --money: var(--green);
  --on-accent: var(--primary-text);
  --surface-1: var(--surface);
  --surface-2: var(--surface-alt);
  --card-bg: var(--surface);
  --line: var(--border);
  --text-primary: var(--text);
  --text-faint: var(--text-muted);
  --purple: var(--primary);
  --purple-light: var(--primary);
  --lavender: var(--primary);
  --nav-bg: var(--surface);
  --tab-bg: var(--surface);
}

/* ── Light theme (same mechanism as qg-theme.js paint) ── */
html.light,
html[data-qg-theme="light"],
body.light {
  --bg: #F7F2FC;
  --surface: #FFFFFF;
  --surface-alt: #F1E9FA;
  --border: #E8DFF2;
  --text: #1A1523;
  --text-muted: #6B6478;
  --primary: #6B21A8;
  --primary-text: #FFFFFF;
  --teal: #0D9488;
  --teal-tint: #E3F5F1;
  --green: #15803D;

  /* Darker for AA on white */
  --attention: #92400e;
  --danger: #b91c1c;

  /* Soft fills tint toward white so chips read on light surfaces */
  --accent-soft: color-mix(in srgb, var(--accent) 14%, #ffffff);
  --money-soft: color-mix(in srgb, var(--green) 12%, #ffffff);
  --attention-soft: color-mix(in srgb, var(--attention) 12%, #ffffff);
  --danger-soft: color-mix(in srgb, var(--danger) 12%, #ffffff);
}

/* ── Mode-aware accent (posting purple vs earning teal) ── */
html[data-qg-mode="worker"],
html[data-mode="tasker"],
body.qg-mode-worker {
  --accent: var(--accent-tasker);
  --grad-accent: var(--grad-tasker);
}

html[data-qg-mode="poster"],
html[data-mode="poster"],
body.qg-mode-poster {
  --accent: var(--accent-poster);
  --grad-accent: var(--grad-poster);
}

/* Legacy poster aliases — previously forced teal, now follow the flow accent. */
html[data-qg-mode="poster"],
html[data-mode="poster"],
body.qg-mode-poster,
html.light[data-qg-mode="poster"],
html[data-qg-theme="light"][data-qg-mode="poster"],
html.light[data-mode="poster"],
body.light.qg-mode-poster {
  --purple: var(--accent-poster);
  --purple-light: var(--accent-poster);
  --lavender: var(--accent-poster);
}

/*
 * Bridge to existing role-theme variable names so shared chrome can
 * gradually adopt tokens without a full restyle pass.
 */
html {
  --qg-mode-accent: var(--accent);
  --qg-mode-gradient: var(--grad-accent);
  --role-accent: var(--accent);
  --role-accent-soft: var(--accent-soft);
}