/* ozharvest-plain v1.2.0
   For pages with no build step. Mirrors theme.css by value, not by import,
   because these pages cannot resolve @import from another origin reliably.
   tests/plain-css-parity.test.ts holds the two in sync.

   v1.1.0 adds dark mode. The three activation states match theme.css exactly:
   the OS drives the default through a guarded media query, and data-theme on
   the root element overrides it either way. A page with no JavaScript theme
   state gets the OS-following path only, which is the correct behaviour for
   it: a toggle would mean shipping state management to a page whose entire
   justification is that it has none. The attribute path still exists so that
   a page which does set it behaves identically to a React app on theme.css.

   This file names no consuming app, on purpose. It is served UNVERSIONED at
   <host>/ozharvest.css, so anything that links it picks up every change at
   deploy time, with no opt-in. That is the opposite of theme.css, which is
   pinned per version and CI-enforced. Treat a change here as reaching every
   linking page at once.

   Every class below reads its colours from the token layer. A hex inside a
   class body cannot change mode, so the parity test fails on any hex outside
   the :root primitive block. */

@font-face {
  font-family: 'Frankfurter';
  src:
    url('fonts/FrankfurterStd.woff2') format('woff2'),
    url('fonts/FrankfurterStd.woff') format('woff');
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-Variable.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --radius: 10px;

  /* Brand primitives, identical to theme.css and enforced so by the parity
     test. Do not edit one file without the other. */
  --oz-yellow: #fadf01;
  --oz-yellow-dark: #e8cc00;
  --oz-black: #201d0c;
  --oz-cream: #fffbf5;
  --oz-pale-yellow: #fffce8;
  --oz-lemon: #fef4a6;
  --oz-red: #e5744c;
  --oz-red-dark: #b23b16;
  --oz-green: #4f7942;
  --oz-pink: #efaa9c;

  /* Dark surface ramp, also identical to theme.css. */
  --oz-ink: #1a1813;
  --oz-ink-raised: #232019;
  --oz-ink-soft: #2e2a1f;
  --oz-ink-rail: #3d3729;
  --oz-ink-line: #403a2e;
  --oz-cream-soft: #f3efe4;
  --oz-sand: #b9b291;
  --oz-green-light: #7fae6f;
  --oz-red-light: #efa770;

  /* Semantic tokens. Same names and same resolved values as theme.css, so a
     page can be moved between the two without its colours shifting. This file
     declares only the subset its own classes consume. */
  --background: var(--oz-cream);
  --foreground: var(--oz-black);
  --card: #ffffff;
  --primary: var(--oz-yellow);
  --primary-foreground: var(--oz-black);
  --muted: var(--oz-pale-yellow);
  --muted-foreground: #6b6656;
  --accent: var(--oz-lemon);
  --accent-foreground: var(--oz-black);
  --border: #e6dfcf;

  /* Twin-only. The plain primary button is black with yellow text, which is
     deliberately not the shadcn --primary pairing (yellow with black text).
     It inverts in dark, where a black button on a near-black page would
     disappear. Both directions measure 12.57:1. */
  --btn-background: var(--oz-black);
  --btn-foreground: var(--oz-yellow);
}

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

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

    --background: var(--oz-ink);
    --foreground: var(--oz-cream-soft);
    --card: var(--oz-ink-raised);
    --primary: var(--oz-yellow);
    --primary-foreground: var(--oz-black);
    --muted: var(--oz-ink-soft);
    --muted-foreground: var(--oz-sand);
    --accent: var(--oz-ink-rail);
    --accent-foreground: var(--oz-cream-soft);
    --border: var(--oz-ink-line);

    --btn-background: var(--oz-yellow);
    --btn-foreground: var(--oz-black);
  }
}

/* Must stay after the media block: equal specificity, so source order is what
   makes an explicit choice win. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --background: var(--oz-ink);
  --foreground: var(--oz-cream-soft);
  --card: var(--oz-ink-raised);
  --primary: var(--oz-yellow);
  --primary-foreground: var(--oz-black);
  --muted: var(--oz-ink-soft);
  --muted-foreground: var(--oz-sand);
  --accent: var(--oz-ink-rail);
  --accent-foreground: var(--oz-cream-soft);
  --border: var(--oz-ink-line);

  --btn-background: var(--oz-yellow);
  --btn-foreground: var(--oz-black);
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: 'Manrope', Arial, sans-serif;
}

.ozh-header {
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 12px 20px;
  font-family: 'Frankfurter', 'Arial Black', sans-serif;
}

.ozh-btn {
  background: var(--btn-background);
  color: var(--btn-foreground);
  border: none;
  border-radius: var(--radius);
  padding: 8px 16px;
  font: inherit;
  cursor: pointer;
}

.ozh-btn-secondary {
  background: transparent;
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 16px;
  font: inherit;
  cursor: pointer;
}

.ozh-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
}

.ozh-table {
  width: 100%;
  border-collapse: collapse;
}

.ozh-table th {
  background: var(--muted);
  color: var(--muted-foreground);
  text-align: left;
  font-weight: 500;
  padding: 8px 10px;
}

.ozh-table td {
  border-bottom: 1px solid var(--border);
  padding: 10px;
}

.ozh-badge {
  background: var(--accent);
  color: var(--accent-foreground);
  border-radius: 999px;
  font-size: 12px;
  padding: 2px 10px;
}