/* LTT colour. Generated by build/tokens.mjs from build/colours.json (build/colours.mjs); edit the scripts, not this file.
   Primitives name a value and are never used in pages. Semantic tokens (--color-*) name a role; pages use only these.
   Themes: light (default) and dark (system preference or data-theme="dark"), on <html> or any element. */

:root {
  /* Grey, hue 248 */
  --grey-50: #fbfcfd;
  --grey-100: #eef0f3;
  --grey-200: #dfe2e6;
  --grey-300: #cbd0d4;
  --grey-400: #b3b8bd;
  --grey-500: #9a9fa4;
  --grey-600: #797e83;
  --grey-700: #51565b;
  --grey-800: #2e3236;
  --grey-900: #15191d;
  --grey-950: #080b0e;

  /* Sticker ramps: each sticker colour at 300 */
  --pink-50: #fef5f9;
  --pink-100: #fedded;
  --pink-200: #ffb3d6;
  --pink-300: #ff6fb0;
  --pink-400: #f14a98;
  --pink-500: #dc257f;
  --pink-600: #c5016b;
  --pink-700: #a80c59;
  --pink-800: #8e1049;
  --pink-900: #77123c;
  --pink-950: #550c28;

  --yellow-50: #fefce8;
  --yellow-100: #fff9c2;
  --yellow-200: #fff089;
  --yellow-300: #ffe14d;
  --yellow-400: #fdcc12;
  --yellow-500: #ecb206;
  --yellow-600: #cc8902;
  --yellow-700: #a36105;
  --yellow-800: #864c0d;
  --yellow-900: #723e11;
  --yellow-950: #431f05;

  --green-50: #e8fef4;
  --green-100: #c2fae1;
  --green-200: #89efc3;
  --green-300: #3dd99b;
  --green-400: #34bd87;
  --green-500: #2ba174;
  --green-600: #248a63;
  --green-700: #1d7454;
  --green-800: #196147;
  --green-900: #17503b;
  --green-950: #0f3627;

  --cornflower-50: #f4f8fe;
  --cornflower-100: #dde8fe;
  --cornflower-200: #b4ceff;
  --cornflower-300: #7aa8ff;
  --cornflower-400: #588fff;
  --cornflower-500: #3773fc;
  --cornflower-600: #215af2;
  --cornflower-700: #1546df;
  --cornflower-800: #1036c5;
  --cornflower-900: #14339c;
  --cornflower-950: #122668;

  --violet-50: #f8f6fe;
  --violet-100: #ebe5fe;
  --violet-200: #d5c7ff;
  --violet-300: #b79cff;
  --violet-400: #a47bff;
  --violet-500: #9255ff;
  --violet-600: #851fff;
  --violet-700: #7211de;
  --violet-800: #5f15bb;
  --violet-900: #4e179a;
  --violet-950: #360f6d;
}

:root,
[data-theme="light"] {
  --color-bg-page: var(--grey-50);
  --color-bg-secondary: var(--grey-100);
  --color-bg-secondary-hover: var(--grey-200);
  --color-bg-inverse: var(--grey-950);
  --color-bg-inverse-hover: var(--grey-800);
  --color-text-primary: var(--grey-950);
  --color-text-secondary: var(--grey-700);
  --color-text-inverse: var(--grey-50);
  --color-border: var(--grey-200);
  --color-selection-bg: var(--grey-950);
  --color-selection-text: var(--grey-50);
  --color-sticker-1: var(--pink-300);
  --color-sticker-2: var(--yellow-300);
  --color-sticker-3: var(--green-300);
  --color-sticker-4: var(--cornflower-300);
  --color-sticker-5: var(--violet-300);
  --color-sticker-text: var(--grey-950);
  --color-sticker-bubble: var(--grey-950);
  --color-sticker-bubble-text: var(--grey-50);
  --shadow-sticker: 0 1px 2px oklch(0.148 0.008 248 / 0.08), 0 8px 22px oklch(0.148 0.008 248 / 0.18);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg-page: var(--grey-950);
    --color-bg-secondary: var(--grey-900);
    --color-bg-secondary-hover: var(--grey-800);
    --color-bg-inverse: var(--grey-100);
    --color-bg-inverse-hover: var(--grey-300);
    --color-text-primary: var(--grey-50);
    --color-text-secondary: var(--grey-400);
    --color-text-inverse: var(--grey-950);
    --color-border: var(--grey-800);
    --color-selection-bg: var(--grey-50);
    --color-selection-text: var(--grey-950);
    --color-sticker-1: var(--pink-300);
    --color-sticker-2: var(--yellow-300);
    --color-sticker-3: var(--green-300);
    --color-sticker-4: var(--cornflower-300);
    --color-sticker-5: var(--violet-300);
    --color-sticker-text: var(--grey-950);
    --color-sticker-bubble: var(--grey-950);
    --color-sticker-bubble-text: var(--grey-50);
    --shadow-sticker: 0 1px 2px oklch(0.148 0.008 248 / 0.08), 0 8px 22px oklch(0.148 0.008 248 / 0.18);
    color-scheme: dark;
  }
}

[data-theme="dark"] {
  --color-bg-page: var(--grey-950);
  --color-bg-secondary: var(--grey-900);
  --color-bg-secondary-hover: var(--grey-800);
  --color-bg-inverse: var(--grey-100);
  --color-bg-inverse-hover: var(--grey-300);
  --color-text-primary: var(--grey-50);
  --color-text-secondary: var(--grey-400);
  --color-text-inverse: var(--grey-950);
  --color-border: var(--grey-800);
  --color-selection-bg: var(--grey-50);
  --color-selection-text: var(--grey-950);
  --color-sticker-1: var(--pink-300);
  --color-sticker-2: var(--yellow-300);
  --color-sticker-3: var(--green-300);
  --color-sticker-4: var(--cornflower-300);
  --color-sticker-5: var(--violet-300);
  --color-sticker-text: var(--grey-950);
  --color-sticker-bubble: var(--grey-950);
  --color-sticker-bubble-text: var(--grey-50);
  --shadow-sticker: 0 1px 2px oklch(0.148 0.008 248 / 0.08), 0 8px 22px oklch(0.148 0.008 248 / 0.18);
  color-scheme: dark;
}