/* ════════════════════════════════════════════════════════════════════════════
   KLO design tokens: raw palette + semantic tokens
   Theme: Natural (default), lighter, natural, fun, colorful
   See docs/THEMING.md for the full palette and theming guide.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Raw palette ──────────────────────────────────────────────────────────── */
:root {
  /* Core brand & primary */
  --klo-black: #000000;
  --klo-cream: #f5f1e6;
  --klo-yellow: #fdc91f;
  --klo-teal: #10a5b4;
  --klo-green: #6ca863;
  --klo-orange-red: #f45c4b;

  /* Extended secondary */
  --klo-royal-blue: #3d7cbf;
  --klo-mid-green: #52a74e;
  --klo-golden-orange: #f99d26;
  --klo-magenta: #a53664;
  --klo-blue-grey: #456a90;

  /* Accent greens & teals */
  --klo-soft-teal: #5ab8a9;
  --klo-turquoise: #3ccacf;
  --klo-sea-green: #86c1ae;

  /* Accent yellows & oranges */
  --klo-mustard: #efc05c;
  --klo-sunshine: #ffe55f;
  --klo-peach: #feddb9;
  --klo-red: #f93b3f;

  /* Accent blues & violets */
  --klo-sky-blue: #66b1d7;
  --klo-lavender: #9f75c4;
  --klo-pink-magenta: #d34185;

  /* Utility & functional */
  --klo-utility-red: #cb3b31;
  --klo-utility-blue: #3a69a1;
  --klo-robot-cyan: #2fcfc7;
}

/* ── Semantic tokens, Theme: Natural ─────────────────────────────────────── */
:root {
  --color-bg: var(--klo-cream);
  --color-surface: var(--klo-peach);
  --color-surface-soft: var(--klo-sunshine);
  --color-text: var(--klo-black);
  --color-text-muted: var(--klo-black);
  --color-primary: var(--klo-yellow);
  --color-primary-contrast: var(--klo-black);
  --color-primary-hover: var(--klo-golden-orange);
  --color-secondary: var(--klo-teal);
  --color-secondary-contrast: white;
  --color-accent: var(--klo-green);
  --color-accent-warm: var(--klo-orange-red);
  --color-border: var(--klo-blue-grey);
  --color-focus: var(--klo-royal-blue);
  --color-danger: var(--klo-utility-red);
  --color-info: var(--klo-utility-blue);
  --color-spark: var(--klo-robot-cyan);
}