/* Dotof — Color tokens
   Base palette + semantic aliases. Single-weight, high-contrast brand system. */

:root {
  /* Base palette */
  --sky: #86ACF8;
  --sky-10: rgba(134, 172, 248, 0.1);
  --pine: #20231A;
  --sand: #F3F3EC;
  --pistachio: #DFE6C3;
  --olive: #7B8D3D;
  --butter: #F0B84D;
  --border-gray: #D9DDC8;
  --placeholder-gray: #999999;
  --white: #FFFFFF;

  /* Semantic action colors — intentional addition, not in the brief.
     Kept within the brand's warm/earthy register rather than a stock
     saturated red/green, so functional states still feel like Dotof. */
  --danger: #B9573D;
  --danger-surface: rgba(185, 87, 61, 0.1);
  --success: var(--olive);
  --success-surface: rgba(123, 141, 61, 0.12);

  /* Overlays */
  --overlay-black-05: rgba(0, 0, 0, 0.05);
  --overlay-black-08: rgba(0, 0, 0, 0.08);
  --overlay-black-10: rgba(0, 0, 0, 0.1);
  --overlay-black-12: rgba(0, 0, 0, 0.12);
  --overlay-black-16: rgba(0, 0, 0, 0.16);

  /* Semantic — surfaces */
  --surface-page: var(--sand);
  --surface-card: var(--white);
  --surface-secondary: var(--pistachio);
  --surface-nested: var(--white);

  /* Semantic — text */
  --text-primary: var(--pine);
  --text-inverse: var(--sand);
  --text-placeholder: var(--placeholder-gray);

  /* Semantic — interactive */
  --interactive-primary: var(--sky);
  --interactive-secondary: var(--olive);
  --interactive-accent: var(--butter);
  --interactive-hover-overlay: var(--overlay-black-05);
  --interactive-active-overlay: var(--overlay-black-10);

  /* Semantic — borders */
  --border-default: var(--border-gray);
  --border-focus: var(--sky);

  /* Semantic — status/badge */
  --badge-bg: var(--sky-10);
  --badge-text: var(--olive);
}