/* Aquila toss-v2 token layer — canonical color source for the Family Chores demo.
   Every literal below is a pinned catalog value from ../DESIGN.md. The app
   stylesheet (./styles.css) consumes only the semantic --aq-* bridges and
   contains no hex/rgb values of its own.

   Layer 1: primitives (palette, rgba, shadow definitions — never overridden).
   Layer 2: semantic properties that map primitives via var(); [data-theme="dark"]
   re-binds only these semantic properties. Print semantics stay light under
   either theme. */

:root {
  /* ---------- Primitives: neutrals ---------- */
  --aq-white: #FFFFFF;              /* colors_white */
  --aq-black: #191F28;              /* colors_black / colors_grey_900 */
  --aq-page: #F4F6F8;               /* toss_v2_primitives_page / semantic_bg */
  --aq-grey-light-50: #F7FAFF;      /* surface_subtle */
  --aq-grey-light-100: #F0F4FB;     /* surface_sunken / border_subtle */
  --aq-grey-light-200: #E2E8F1;     /* border / card_border / surface_strong */
  --aq-grey-light-300: #CED6E2;     /* border_strong */
  --aq-grey-light-500: #8A95A4;     /* fg_subtle */
  --aq-grey-light-600: #6B7686;     /* fg_muted / border_interactive */
  --aq-grey-light-700: #4D596A;     /* fg_secondary */
  --aq-grey-light-800: #323D4D;     /* fg_strong */
  --aq-grey-light-900: #161F2C;     /* fg */
  --aq-grey-400: #B0B8C1;           /* colors_grey_400 */
  --aq-grey-600: #6B7684;           /* colors_grey_600 */
  --aq-grey-700: #4E5968;           /* colors_grey_700 */

  /* ---------- Primitives: accent / code / data ---------- */
  --aq-blue-50: #E8F3FF;            /* accent_subtle */
  --aq-blue-500: #3182F6;           /* ring / solid */
  --aq-blue-700: #1B64DA;           /* accent_strong / ring_strong */
  --aq-code-surface: #142238;
  --aq-code-muted: #8AB8FF;
  --aq-heatmap-3: #6BA3F5;

  /* ---------- Primitives: feedback ---------- */
  --aq-feedback-info-light: #EBF4FF;
  --aq-feedback-warning: #F59E0B;
  --aq-feedback-warning-light: #FFF8E1;
  --aq-feedback-error: #F04452;
  --aq-feedback-error-light: #FFF0F0;

  /* ---------- Primitives: categories (avatar/reward accents) ---------- */
  --aq-cat-1: #8A84E4;
  --aq-cat-1-light: #E8E8FF;
  --aq-cat-1-dark: #483D91;
  --aq-cat-2: #24B2DA;
  --aq-cat-2-light: #D9FAFF;
  --aq-cat-2-dark: #006185;
  --aq-cat-3: #5BE7C5;              /* reward mint */
  --aq-cat-3-light: #DAFDF1;
  --aq-cat-3-dark: #009275;
  --aq-cat-4: #F2AD73;
  --aq-cat-4-dark: #9A5E27;

  /* ---------- Primitives: elevation / scrim ---------- */
  --aq-shadow-accent: #111827;      /* visual_light_shadow_accent */
  --aq-shadow-accent-channels: 17, 24, 39;
  --aq-ink-channels: 22, 31, 44;    /* grey-light-900 / fg at reduced opacity */
  --aq-black-channels: 0, 0, 0;     /* derived dark-theme alpha base */
  --aq-backdrop-light: rgba(var(--aq-ink-channels), 0.48);
  --aq-backdrop-dark: rgba(var(--aq-black-channels), 0.55);
  --aq-shadow-light: 0 12px 32px rgba(var(--aq-shadow-accent-channels), 0.14);
  --aq-shadow-dark: 0 12px 32px rgba(var(--aq-black-channels), 0.5);

  /* ---------- Semantic bridges (light) ---------- */
  --aq-bg: var(--aq-page);
  --aq-surface: var(--aq-white);
  --aq-surface-subtle: var(--aq-grey-light-50);
  --aq-surface-sunken: var(--aq-grey-light-100);
  --aq-surface-strong: var(--aq-grey-light-200);
  --aq-fg: var(--aq-grey-light-900);
  --aq-fg-strong: var(--aq-grey-light-800);
  --aq-fg-secondary: var(--aq-grey-light-700);
  --aq-fg-muted: var(--aq-grey-light-700);      /* secondary for small-text contrast */
  --aq-fg-subtle: var(--aq-grey-light-500);
  --aq-border: var(--aq-grey-light-200);
  --aq-border-strong: var(--aq-grey-light-300);
  --aq-border-interactive: var(--aq-grey-light-600);
  --aq-solid: var(--aq-blue-700);               /* accent_strong, white text contrast 5.41 */
  --aq-solid-hover: var(--aq-black);            /* readable white text */
  --aq-solid-fg: var(--aq-white);
  --aq-accent-strong: var(--aq-blue-700);
  --aq-accent-subtle: var(--aq-blue-50);
  --aq-ring: var(--aq-blue-500);
  --aq-err: var(--aq-feedback-error);
  --aq-err-bg: var(--aq-feedback-error-light);
  --aq-warn-edge: var(--aq-feedback-warning);
  --aq-warn-bg: var(--aq-feedback-warning-light);
  --aq-status-assigned-bg: var(--aq-feedback-info-light);
  --aq-status-assigned-fg: var(--aq-blue-700);
  --aq-status-pending-bg: var(--aq-feedback-warning-light);
  --aq-status-pending-fg: var(--aq-cat-4-dark);
  --aq-status-approved-bg: var(--aq-cat-3-light);
  --aq-status-approved-fg: var(--aq-grey-light-900);
  --aq-status-settled-bg: var(--aq-grey-light-100);
  --aq-status-settled-fg: var(--aq-grey-light-700);
  --aq-reward-bg: var(--aq-cat-3-light);
  --aq-reward-fg: var(--aq-grey-light-900);
  --aq-reward-border: var(--aq-cat-3);
  --aq-avatar-1-bg: var(--aq-cat-1-light);
  --aq-avatar-1-fg: var(--aq-cat-1-dark);
  --aq-avatar-2-bg: var(--aq-cat-2-light);
  --aq-avatar-2-fg: var(--aq-cat-2-dark);
  --aq-avatar-3-bg: var(--aq-cat-3-light);
  --aq-avatar-3-fg: var(--aq-grey-light-900);
  --aq-backdrop: var(--aq-backdrop-light);
  --aq-shadow: var(--aq-shadow-light);

  /* ---------- Print semantics (always light, theme-independent) ---------- */
  --aq-print-bg: var(--aq-white);
  --aq-print-fg: var(--aq-black);
}

[data-theme="dark"] {
  /* Dark theme re-binds semantic properties only; primitives are unchanged. */
  --aq-bg: var(--aq-grey-light-900);
  --aq-surface: var(--aq-black);
  --aq-surface-subtle: var(--aq-code-surface);
  --aq-surface-sunken: var(--aq-grey-light-900);
  --aq-surface-strong: var(--aq-grey-light-800);
  --aq-fg: var(--aq-page);
  --aq-fg-strong: var(--aq-white);
  --aq-fg-secondary: var(--aq-grey-light-300);
  --aq-fg-muted: var(--aq-grey-light-500);
  --aq-fg-subtle: var(--aq-grey-600);
  --aq-border: var(--aq-grey-light-800);
  --aq-border-strong: var(--aq-grey-700);
  --aq-border-interactive: var(--aq-grey-light-500);
  --aq-accent-strong: var(--aq-code-muted);
  --aq-accent-subtle: var(--aq-code-surface);
  --aq-ring: var(--aq-heatmap-3);
  --aq-err-bg: var(--aq-grey-light-800);
  --aq-warn-bg: var(--aq-grey-light-800);
  --aq-status-assigned-bg: var(--aq-grey-light-800);
  --aq-status-assigned-fg: var(--aq-code-muted);
  --aq-status-pending-bg: var(--aq-grey-light-800);
  --aq-status-pending-fg: var(--aq-cat-4);
  --aq-status-approved-bg: var(--aq-grey-light-800);
  --aq-status-approved-fg: var(--aq-cat-3);
  --aq-status-settled-bg: var(--aq-grey-light-800);
  --aq-status-settled-fg: var(--aq-grey-400);
  --aq-reward-bg: var(--aq-code-surface);
  --aq-reward-fg: var(--aq-cat-3);
  --aq-reward-border: var(--aq-cat-3-dark);
  --aq-avatar-1-bg: var(--aq-cat-1-dark);
  --aq-avatar-1-fg: var(--aq-cat-1-light);
  --aq-avatar-2-bg: var(--aq-cat-2-dark);
  --aq-avatar-2-fg: var(--aq-cat-2-light);
  --aq-avatar-3-bg: var(--aq-code-surface);
  --aq-avatar-3-fg: var(--aq-cat-3);
  --aq-backdrop: var(--aq-backdrop-dark);
  --aq-shadow: var(--aq-shadow-dark);
}