/*
 * Design tokens — "Warm & Cozy" palette.
 * Light values in :root, dark values under prefers-color-scheme: dark.
 * Custom properties resolve at use-time, so file/declaration order is irrelevant
 * for consumers (buttons.css can load before or after this file).
 */
:root {
  color-scheme: light;

  /* Surfaces & text */
  --color-bg: #FBF6F2;
  --color-surface: #FFFFFF;
  --color-surface-raised: #F6EFE9;
  --color-border: #EADFD7;
  --color-text: #2B211D;
  --color-text-muted: #84756C;

  /* Brand (coral) */
  --color-primary: #F2604C;            /* identity color: icon, accents, non-text fills */
  --color-primary-strong: #D8432F;     /* solid-button fill (AA with white text) */
  --color-primary-strong-hover: #C23B29;
  --color-primary-strong-active: #AE3422;
  --color-on-primary: #FFFFFF;

  /* Secondary accent (teal) */
  --color-accent: #0E8174;
  --color-accent-hover: #0A6C61;
  --color-accent-active: #095A51;
  --color-on-accent: #FFFFFF;
  --color-accent-subtle: #DCF0EC;
  --color-accent-focus-ring: rgba(14, 129, 116, 0.35);

  /* Ghost button */
  --color-secondary-hover: #F1E8E1;
  --color-secondary-active: #E7DBD2;

  /* Focus ring (coral) */
  --color-focus-ring: rgba(242, 96, 76, 0.40);

  /* Semantic */
  --color-success: #2E9E6B;
  --color-warning: #C98A00;
  --color-danger: #D92D20;
  --color-info: #2563EB;
  /* Pale washes for tinted surfaces (e.g. notice backgrounds) */
  --color-success-subtle: #E6F3EA;
  --color-warning-subtle: #FAF0D8;
  --color-danger-subtle: #FBE7E4;
  --color-info-subtle: #E8EEFC;
  --color-danger-focus-ring: rgba(217, 45, 32, 0.30);
}

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

    --color-bg: #1A1512;
    --color-surface: #231C18;
    --color-surface-raised: #2D241F;
    --color-border: #3A2E28;
    --color-text: #F4ECE6;
    --color-text-muted: #AE9F96;

    --color-primary: #F2604C;
    --color-primary-strong: #D8432F;
    --color-primary-strong-hover: #C23B29;
    --color-primary-strong-active: #AE3422;
    --color-on-primary: #FFFFFF;

    --color-accent: #3FC9B6;
    --color-accent-hover: #5AD7C5;
    --color-accent-active: #2FB2A1;
    --color-on-accent: #06312C;
    --color-accent-subtle: #14322E;
    --color-accent-focus-ring: rgba(63, 201, 182, 0.40);

    --color-secondary-hover: #2D241F;
    --color-secondary-active: #352B25;

    --color-focus-ring: rgba(255, 112, 88, 0.45);

    --color-success: #34B57D;
    --color-warning: #E0A82E;
    --color-danger: #F2655A;
    --color-info: #5B8DEF;
    /* Pale washes for tinted surfaces (e.g. notice backgrounds) */
    --color-success-subtle: #163020;
    --color-warning-subtle: #33291A;
    --color-danger-subtle: #371E1B;
    --color-info-subtle: #1B2541;
    --color-danger-focus-ring: rgba(242, 101, 90, 0.35);
  }
}

/* Base application of tokens */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}