/*
 * MintBear design tokens. The light values equal the long-standing
 * site-redesign palette; site-redesign maps the legacy --color-* names to
 * these tokens. Dark values override only tokens, never component rules.
 */
@layer reset, tokens, base, components, pages, overrides;

@layer tokens {
  :root {
    color-scheme: light;

    --mb-bg: #e8eeea;
    --mb-app: #f4f6f2;
    --mb-rail: #edf2ed;
    --mb-surface: #ffffff;
    --mb-surface-2: #eaf2ed;
    --mb-text: #122422;
    --mb-text-muted: #53645f;
    --mb-accent: #126f69;
    --mb-accent-strong: #0d5954;
    --mb-accent-soft: #d8f3e6;
    --mb-on-accent: #ffffff;
    --mb-focus: #157d75;
    --mb-info: #3d687c;
    --mb-warning: #8b5a18;
    --mb-danger: #b44b39;
    --mb-border: #d8e2db;
    --mb-border-strong: #d1ddd4;
    --mb-border-accent: #97beac;
    --mb-tint-1: #f7faf6;
    --mb-tint-2: #f1f7f2;
    --mb-tint-3: #dfece3;
    --mb-warning-soft: #fff4df;
    --mb-warning-strong: #6d4512;
    --mb-nav-text: #334d46;
    --mb-violet: #59429a;
    --mb-shadow: 0 18px 48px rgba(18, 36, 34, 0.09);

    /* Type scale (12/14/16/18/22/28/36/56 px). */
    --mb-font-xs: 0.75rem;
    --mb-font-sm: 0.875rem;
    --mb-font-md: 1rem;
    --mb-font-lg: 1.125rem;
    --mb-font-xl: 1.375rem;
    --mb-font-2xl: 1.75rem;
    --mb-font-3xl: 2.25rem;
    --mb-font-4xl: 3.5rem;

    /* Spacing 4/8/12/16/24/32/48 px. */
    --mb-space-1: 0.25rem;
    --mb-space-2: 0.5rem;
    --mb-space-3: 0.75rem;
    --mb-space-4: 1rem;
    --mb-space-5: 1.5rem;
    --mb-space-6: 2rem;
    --mb-space-7: 3rem;

    --mb-radius-sm: 6px;
    --mb-radius-md: 8px;
    --mb-radius-lg: 12px;
    --mb-radius-pill: 999px;

    --mb-duration-fast: 120ms;
    --mb-duration-base: 160ms;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;

      --mb-bg: #0b100e;
      --mb-app: #111815;
      --mb-rail: #0e1512;
      --mb-surface: #17201c;
      --mb-surface-2: #1e2924;
      --mb-text: #e6efeb;
      --mb-text-muted: #a3b5ad;
      --mb-accent: #5fd0ae;
      --mb-accent-strong: #84e0c4;
      --mb-accent-soft: #1c3a30;
      --mb-on-accent: #07120e;
      --mb-focus: #84e0c4;
      --mb-info: #8ec3d8;
      --mb-warning: #e0b36a;
      --mb-danger: #f08a78;
      --mb-border: #2b3833;
      --mb-border-strong: #33433c;
      --mb-border-accent: #3d5a4f;
      --mb-tint-1: #19231f;
      --mb-tint-2: #1b2622;
      --mb-tint-3: #24322c;
      --mb-warning-soft: #33281a;
      --mb-warning-strong: #f0c98a;
      --mb-nav-text: #b9cbc3;
      --mb-violet: #b9acff;
      --mb-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    }
  }

  :root[data-theme="dark"] {
    color-scheme: dark;

    --mb-bg: #0b100e;
    --mb-app: #111815;
    --mb-rail: #0e1512;
    --mb-surface: #17201c;
    --mb-surface-2: #1e2924;
    --mb-text: #e6efeb;
    --mb-text-muted: #a3b5ad;
    --mb-accent: #5fd0ae;
    --mb-accent-strong: #84e0c4;
    --mb-accent-soft: #1c3a30;
    --mb-on-accent: #07120e;
    --mb-focus: #84e0c4;
    --mb-info: #8ec3d8;
    --mb-warning: #e0b36a;
    --mb-danger: #f08a78;
    --mb-border: #2b3833;
    --mb-border-strong: #33433c;
    --mb-border-accent: #3d5a4f;
    --mb-tint-1: #19231f;
    --mb-tint-2: #1b2622;
    --mb-tint-3: #24322c;
    --mb-warning-soft: #33281a;
    --mb-warning-strong: #f0c98a;
    --mb-nav-text: #b9cbc3;
    --mb-violet: #b9acff;
    --mb-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  }
}