/* Design tokens. Light theme is the default; dark ("night on the farm") applies via
   data-theme="dark" (set by src/ui/theme.js) or the OS preference before JS runs. */

@font-face {
  font-family: 'Pixelify Sans';
  src: url('../assets/fonts/pixelify-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pixelify Sans';
  src: url('../assets/fonts/pixelify-sans-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --font-pixel: 'Pixelify Sans', ui-monospace, 'Cascadia Mono', monospace;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --color-bg: #f4ecd8;
  --color-surface: #fffaf0;
  --color-surface-2: #efe3c8;
  --color-text: #2b2118;
  --color-text-muted: #6b5a47;
  --color-border: #3b2a1c;
  --color-primary: #2f7a2b;
  --color-primary-strong: #245f21;
  --color-on-primary: #fffaf0;
  --color-accent: #d9a441;
  --color-on-accent: #2b2118;
  --color-danger: #a8321f;
  --color-on-danger: #fffaf0;
  --color-warning: #b86e0d;
  --color-info: #2f6f9c;
  --color-focus: #2f6f9c;
  --color-field: #6fb85a;
  --color-header: #245f21;
  --color-on-header: #fffaf0;

  --px-ink: #2b2118;
  --px-green: #5cae4a;
  --px-green-dark: #2e6b2a;
  --px-wood: #b97a45;
  --px-wood-dark: #7a4a26;
  --px-red: #c2412f;
  --px-red-dark: #7f2418;
  --px-steel: #cfd6db;
  --px-steel-dark: #8a979f;
  --px-wheat: #e8c15a;
  --px-sky: #7fbbe0;
  --px-cream: #fff6dc;
  --px-flame: #f08a24;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius: 2px;
  --border-width: 3px;
  --shadow-pixel: 4px 4px 0 var(--color-border);
  --shadow-pixel-sm: 2px 2px 0 var(--color-border);

  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;

  --content-width: 960px;
  --header-height: 60px;
}

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

  --color-bg: #1b2330;
  --color-surface: #243042;
  --color-surface-2: #2d3b50;
  --color-text: #f1e9d6;
  --color-text-muted: #b8ad94;
  --color-border: #0b0f15;
  --color-primary: #6cc35a;
  --color-primary-strong: #8ad97a;
  --color-on-primary: #10160f;
  --color-accent: #e8c15a;
  --color-on-accent: #1b2330;
  --color-danger: #e5705c;
  --color-on-danger: #1b1210;
  --color-warning: #f0a54a;
  --color-info: #8cc4e8;
  --color-focus: #e8c15a;
  --color-field: #3f7a36;
  --color-header: #1f3b29;
  --color-on-header: #f1e9d6;

  --px-ink: #0b0f15;
  --px-green: #6cc35a;
  --px-green-dark: #3a8a33;
  --px-wood: #c98b55;
  --px-wood-dark: #8a5a33;
  --px-red: #d85a45;
  --px-red-dark: #93301f;
  --px-steel: #d6dde2;
  --px-steel-dark: #97a5ad;
  --px-wheat: #f0cd6a;
  --px-sky: #8cc4e8;
  --px-cream: #fff3d0;
  --px-flame: #ff9a3c;
}

/* Same dark tokens before JS resolves the preference (and with JS disabled). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --color-bg: #1b2330;
    --color-surface: #243042;
    --color-surface-2: #2d3b50;
    --color-text: #f1e9d6;
    --color-text-muted: #b8ad94;
    --color-border: #0b0f15;
    --color-primary: #6cc35a;
    --color-primary-strong: #8ad97a;
    --color-on-primary: #10160f;
    --color-accent: #e8c15a;
    --color-on-accent: #1b2330;
    --color-danger: #e5705c;
    --color-on-danger: #1b1210;
    --color-warning: #f0a54a;
    --color-info: #8cc4e8;
    --color-focus: #e8c15a;
    --color-field: #3f7a36;
    --color-header: #1f3b29;
    --color-on-header: #f1e9d6;

    --px-ink: #0b0f15;
    --px-green: #6cc35a;
    --px-green-dark: #3a8a33;
    --px-wood: #c98b55;
    --px-wood-dark: #8a5a33;
    --px-red: #d85a45;
    --px-red-dark: #93301f;
    --px-steel: #d6dde2;
    --px-steel-dark: #97a5ad;
    --px-wheat: #f0cd6a;
    --px-sky: #8cc4e8;
    --px-cream: #fff3d0;
    --px-flame: #ff9a3c;
  }
}