/**
 * Synced with src/common/constant/color.ts (COLOR_LIGHT / COLOR_DARK).
 * Semantic aliases are used in index.css; raw tokens stay available for accents.
 */

:root {
  color-scheme: light;

  --red-500: #f26b57;
  --green-500: #3cb371;
  --green-600: #139c50;
  --grey-100: #f6f6f6;
  --grey-200: #e7e7e7;
  --grey-300: #cdcdcd;
  --grey-400: #a0a0a0;
  --grey-500: #5a5a5a;
  --grey-600: #3e3e3e;
  --grey-700: #191919;
  --grey-800: #0e0e0e;
  --blue-100: #ecf3ff;
  --blue-500: #0c65f2;
  --blue-600: #0047b8;
  --background: #ffffff;
  --white: #ffffff;

  --color-bg: var(--background);
  --color-surface: var(--grey-100);
  --color-border: var(--grey-200);
  --color-text: var(--grey-800);
  --color-text-secondary: var(--grey-500);
  --color-text-muted: var(--grey-400);
  --color-accent: var(--blue-500);
  --color-accent-hover: var(--blue-600);
  --color-on-accent: var(--white);
  --color-button-solid: var(--grey-800);
  --color-on-button-solid: var(--white);
  --color-store-bg: #111111;
  --color-store-fg: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --grey-100: #20262f;
    --grey-200: #2e3541;
    --grey-300: #424a5b;
    --grey-400: #596376;
    --grey-500: #7d889a;
    --grey-600: #adb6c5;
    --grey-700: #d1d8e4;
    --grey-800: #f0f4fa;
    --blue-100: #132441;
    --blue-500: #0c65f2;
    --blue-600: #4187f5;
    --background: #141922;
    --white: #ffffff;

    --color-bg: var(--background);
    --color-surface: var(--grey-100);
    --color-border: var(--grey-200);
    --color-text: var(--grey-800);
    --color-text-secondary: var(--grey-500);
    --color-text-muted: var(--grey-400);
    --color-accent: var(--blue-500);
    --color-accent-hover: var(--blue-600);
    --color-on-accent: var(--white);
    --color-button-solid: var(--grey-200);
    --color-on-button-solid: var(--grey-800);
    --color-store-bg: var(--grey-100);
    --color-store-fg: var(--grey-800);
  }
}