/* Colour tokens for every lotlsoft.com page, light and dark.
   The single source: src/globals.css inlines this file into the app bundle,
   and vite.config.ts also serves it unhashed at /tokens.css for the static
   pages (about, accounts, terms, blog), which link it directly.
   Dark mode follows the system setting; there is no toggle. */

:root {
  color-scheme: light dark;

  /* lotlsoft refined theme - subtle with pink accents. The names are the
     light palette's; dark mode redefines the same names below so every
     component tracks the scheme without a second set of rules. */
  --axolotl-pink: #e8849a;
  --blush-mist: #fdf5f7;
  --warm-white: #fefefe;
  --soft-grey: #eaeaea;
  --charcoal: #2d2d2d;
  --muted-grey: #6c6c6c;
  --hover-light: #f5f5f5;
  --gill-coral: #d96b82;
  --gill-coral-strong: #a65163; /* darker coral that clears WCAG AA as small text on light */
  --border-subtle: #e8e8e8;
  --on-accent: #fff;
  --shadow-resting: 0 1px 6px rgb(0 0 0 / 4%);
  --shadow-raised: 0 6px 24px rgb(0 0 0 / 6%);
  --shadow-icon: 0 1px 3px rgb(0 0 0 / 8%), 0 0 0 1px rgb(0 0 0 / 4%);
  --shadow-menu: 0 4px 16px rgb(0 0 0 / 8%);

  /* @lotlsoft/sdk UI components read these names. Alias once here so
     dark / light / system modes track the project's underlying tokens.
     See lotl-sdk/CLAUDE.md § CSS: Design tokens. */
  --bg-card: #fff;
  --bg-secondary: #f7f7f7;
  --text-primary: #1a1a1a;
  --text-secondary: #555;
  --text-muted: #888;
  --accent: #3b82f6;
  --border: var(--border-subtle);
  --warning: #d97706;
  --negative: #dc2626;
}

@media (prefers-color-scheme: dark) {
  :root {
    --axolotl-pink: #ec93a8;
    --blush-mist: #2b2124;
    --warm-white: #161415;
    --soft-grey: #3a3537;
    --charcoal: #f0ecee;
    --muted-grey: #a9a2a5;
    --hover-light: #221f20;
    --gill-coral: #e58aa0;
    --gill-coral-strong: #f0a3b6; /* lightened so it clears AA as small text on dark */
    --border-subtle: #2e2a2c;
    --on-accent: #1a1517;
    --shadow-resting: 0 1px 6px rgb(0 0 0 / 30%);
    --shadow-raised: 0 8px 28px rgb(0 0 0 / 45%);
    --shadow-icon: 0 1px 3px rgb(0 0 0 / 40%), 0 0 0 1px rgb(255 255 255 / 8%);
    --shadow-menu: 0 6px 20px rgb(0 0 0 / 50%);
    --bg-card: #1e1b1c;
    --bg-secondary: #221f20;
    --text-primary: #f0ecee;
    --text-secondary: #c4bcbf;
    --text-muted: #8e8689;
    --accent: #7aa7ff;
    --warning: #f0a23b;
    --negative: #f26b6b;
  }
}