/* Clay theme — DESIGN.md design language mapped onto Beer CSS (Material 3).
 *
 * Source of truth: /DESIGN.md (Clay.com system). This file overrides Beer CSS's
 * M3 CSS variables so Beer components render in the Clay language: warm cream
 * canvas, near-black ink CTAs, generous radii, Inter type, no heavy shadows.
 *
 * Dashboard subset: marketing-only Clay constructs (hero bands, claymation
 * illustrations, pricing tiers, 72px display heroes, 96px section rhythm) are
 * intentionally out of scope for utilitarian dashboards + the shop. What carries
 * over: the cream palette, brand-color accent cards, type, radii, flat depth.
 *
 * Load AFTER beer.min.css so these overrides win. Light mode only (drop
 * `class="dark"` on <body>).
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/vendor/bundle/InterVariable.woff2") format("woff2");
}

:root {
  /* --- Clay raw tokens (DESIGN.md) — reference these in @scope/inline CSS --- */
  --clay-canvas: #fffaf0;
  --clay-surface-soft: #faf5e8;
  --clay-surface-card: #f5f0e0;
  --clay-surface-strong: #ebe6d6;
  --clay-surface-dark: #0a1a1a;
  --clay-surface-dark-elevated: #1a2a2a;
  --clay-hairline: #e5e5e5;

  --clay-ink: #0a0a0a;
  --clay-body-strong: #1a1a1a;
  --clay-body: #3a3a3a;
  --clay-muted: #6a6a6a;
  --clay-muted-soft: #9a9a9a;
  --clay-on-dark: #ffffff;

  /* 6 saturated brand cards + 2 accents. Rotate per DESIGN.md; never twice in a row. */
  --clay-pink: #ff4d8b;
  --clay-teal: #1a3a3a;
  --clay-lavender: #b8a4ed;
  --clay-peach: #ffb084;
  --clay-ochre: #e8b94a;
  --clay-mint: #a4d4c5;
  --clay-coral: #ff6b5a;
  /* cork oak green — the app brand anchor (apps/lyan/DESIGN.md) */
  --clay-oak: #4a8558;

  --clay-success: #22c55e;
  --clay-warning: #f59e0b;
  --clay-error: #ef4444;

  /* radii (DESIGN.md shape scale) */
  --clay-r-xs: 6px;
  --clay-r-sm: 8px;
  --clay-r-md: 12px;  /* buttons, inputs */
  --clay-r-lg: 16px;  /* content cards */
  --clay-r-xl: 24px;  /* feature cards */
  --clay-r-pill: 9999px;

  /* spacing (4px base) */
  --clay-s-xs: 8px;
  --clay-s-sm: 12px;
  --clay-s-md: 16px;
  --clay-s-lg: 24px;
  --clay-s-xl: 32px;
}

/* --- Beer CSS M3 token overrides (light) --- */
:root,
body.light {
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* primary = near-black ink CTAs */
  --primary: #0a0a0a;
  --on-primary: #fffaf0;
  --primary-container: #ebe6d6;
  --on-primary-container: #0a0a0a;

  /* secondary = warm body grey on cream */
  --secondary: #3a3a3a;
  --on-secondary: #fffaf0;
  --secondary-container: #f5f0e0;
  --on-secondary-container: #0a0a0a;

  /* tertiary = cork oak green (brand accent) */
  --tertiary: #4a8558;
  --on-tertiary: #ffffff;
  --tertiary-container: #d8e8dc;
  --on-tertiary-container: #0a1a10;

  --error: #ef4444;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #410002;

  /* warm cream canvas everywhere */
  --background: #fffaf0;
  --on-background: #0a0a0a;
  --surface: #fffaf0;
  --on-surface: #0a0a0a;
  --surface-variant: #f5f0e0;
  --on-surface-variant: #6a6a6a;

  --outline: #9a9a9a;
  --outline-variant: #e5e5e5;
  --shadow: #000000;
  --scrim: #000000;

  /* dark inversions stay warm teal-tinted (rare use: snackbars, tooltips) */
  --inverse-surface: #1a2a2a;
  --inverse-on-surface: #fffaf0;
  --inverse-primary: #cfe3d3;

  /* cream elevation ramp (replaces M3 purple-grey) */
  --surface-dim: #ebe6d6;
  --surface-bright: #fffaf0;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #faf5e8;
  --surface-container: #f5f0e0;
  --surface-container-high: #ebe6d6;
  --surface-container-highest: #e3ddcb;
}

/* --- Depth: Clay uses flat color contrast, not heavy shadows --- */
body { background: var(--clay-canvas); }

article,
.card,
nav.bottom,
nav.top {
  box-shadow: none;
}

/* --- Radii: snap Beer's 1rem defaults to the Clay shape scale --- */
button:not(.circle):not(.chip),
.button:not(.circle),
.field > input,
.field > textarea,
.field > select,
input[type="text"],
input[type="search"],
textarea {
  border-radius: var(--clay-r-md);
}

article,
.card,
dialog {
  border-radius: var(--clay-r-lg);
}

/* --- Typography: Inter everywhere; display = Inter 500 + negative tracking --- */
body { font-family: var(--font); }

h1, h2, h3, h4, h5, h6, .display {
  font-weight: 500;
  letter-spacing: -0.02em;
}

.display { letter-spacing: -0.04em; line-height: 1.05; }
.display-xl { font-size: 4.5rem; letter-spacing: -0.045em; }  /* 72px */
.display-lg { font-size: 3.5rem; }   /* 56px */
.display-md { font-size: 2.5rem; }   /* 40px */

.caption-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  color: var(--clay-muted);
}

/* --- Brand feature cards (DESIGN.md saturated single-color cards) ---
 * White ink on pink/teal/coral/dark; dark ink on the lighter saturations. */
.feature-card {
  border-radius: var(--clay-r-xl);
  padding: var(--clay-s-xl);
  box-shadow: none;
}
.feature-pink     { background: var(--clay-pink);     color: var(--clay-on-dark); }
.feature-teal     { background: var(--clay-teal);     color: var(--clay-on-dark); }
.feature-coral    { background: var(--clay-coral);    color: var(--clay-on-dark); }
.feature-lavender { background: var(--clay-lavender);  color: var(--clay-ink); }
.feature-peach    { background: var(--clay-peach);     color: var(--clay-ink); }
.feature-ochre    { background: var(--clay-ochre);     color: var(--clay-ink); }
.feature-mint     { background: var(--clay-mint);      color: var(--clay-ink); }
.feature-cream    { background: var(--clay-surface-card); color: var(--clay-ink); }

/* --- Error banner (web/lib/ui.mjs ErrorBanner): a failed load or write --- */
.error-banner {
  display: flex;
  align-items: center;
  gap: var(--clay-s-xs);
  margin: var(--clay-s-sm) 0;
  padding: var(--clay-s-xs) var(--clay-s-sm);
  border-radius: var(--clay-r-md);
  background: var(--error-container);
  color: var(--on-error-container);
}
.error-banner > i { color: var(--error); flex: none; }
.error-banner > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.error-banner > button { flex: none; color: inherit; }