/* Design tokens — light/dark, single magenta accent across both.
   Light is the base :root; dark overrides via prefers-color-scheme (system default)
   and [data-theme] (explicit user toggle, wins over system in both directions). */

:root{
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #f2f3f4;
  --text: #111214;
  --text-soft: #5b5e63;
  --border: #e6e7e9;

  --accent: #ff2d8a;              /* vivid magenta — buttons, large emphasis, both modes */
  --accent-text: #c81f6d;         /* deeper shade for accent-colored small text on light bg (AA contrast) */
  --accent-contrast: #ffffff;     /* text/icon color placed on top of an accent-filled surface */

  --success: #16a34a;
  --success-bg: #e9f8ef;
  --error: #dc2626;
  --error-bg: #fdecec;
  --partial: #d97706;
  --partial-bg: #fdf3e2;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(17,18,20,0.06);
  --shadow-md: 0 4px 16px rgba(17,18,20,0.08);

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #101113;
    --surface: #17181b;
    --surface-2: #1e2023;
    --text: #f2f3f4;
    --text-soft: #9a9da2;
    --border: #2a2d31;

    --accent: #ff2d8a;
    --accent-text: #ff5fa8;       /* lighter shade reads better as small text on dark bg */
    --accent-contrast: #ffffff;

    --success: #34d16a;
    --success-bg: #163524;
    --error: #f87171;
    --error-bg: #3a1f20;
    --partial: #fbbf24;
    --partial-bg: #3a2f14;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.4);

    color-scheme: dark;
  }
}

:root[data-theme="dark"]{
  --bg: #101113;
  --surface: #17181b;
  --surface-2: #1e2023;
  --text: #f2f3f4;
  --text-soft: #9a9da2;
  --border: #2a2d31;

  --accent: #ff2d8a;
  --accent-text: #ff5fa8;
  --accent-contrast: #ffffff;

  --success: #34d16a;
  --success-bg: #163524;
  --error: #f87171;
  --error-bg: #3a1f20;
  --partial: #fbbf24;
  --partial-bg: #3a2f14;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.4);

  color-scheme: dark;
}