/*
 * The design language for the storefront pages (PHASE_STOREFRONT_DESIGN.md →
 * Part 1): light, calm, premium, photo-first. Warm off-white page, soft
 * warm-gray cards with large corners and no borders, big bold titles, small
 * light-gray section labels, soft-gray body text, fully rounded pills, and ONE
 * dark accent per screen (.ds-btn-dark or .ds-toolbar).
 *
 * ⚠️ TWIN FILE: constants/design.ts carries the same values for the app.
 * __tests__/design-tokens.test.ts fails if the two drift — change both.
 *
 * Load it ABSOLUTELY — <link rel="stylesheet" href="/design.css"> — and keep
 * its passthrough line in _redirects, or the /:handle catch-all answers it
 * with the storefront's HTML (see _redirects → /config.js).
 */

:root {
  color-scheme: light;

  --ds-page: #F7F5F2;
  --ds-card: #EFECE8;
  --ds-card-pressed: #E6E2DD;
  --ds-pill: #FFFFFF;
  --ds-ink: #1C1C1E;
  --ds-body: #6E6A66;
  --ds-label: #9A9690;
  --ds-faint: #CBC6C0;
  --ds-accent: #232427;
  --ds-on-accent: #FFFFFF;
  --ds-success: #2E9E5B;
  --ds-link: #3C87F7;
  --ds-danger: #D7263D;
  --ds-highlight: #FFD23F;
  --ds-on-highlight: #1C1C1E;
  --ds-pending: #E8700A;
  --ds-pending-soft: #F8DEC6;
  --ds-on-pending-soft: #8A3F00;
  --ds-sample: #FFE07A;
  --ds-on-sample: #4A3800;

  --ds-radius-card: 20px;
  --ds-radius-image: 24px;
  --ds-radius-small: 8px;
  --ds-radius-full: 999px;

  --ds-space-xs: 4px;
  --ds-space-sm: 8px;
  --ds-space-md: 12px;
  --ds-space-lg: 16px;
  --ds-space-xl: 24px;
  --ds-space-xxl: 32px;
  --ds-space-xxxl: 48px;

  --ds-text-title: 32px;
  --ds-text-heading: 20px;
  --ds-text-body: 16px;
  --ds-text-label: 13px;
  --ds-text-pill: 12px;

  --ds-size-dark-button: 60px;
  --ds-size-toolbar: 56px;
  --ds-size-toolbar-icon: 40px;
  --ds-size-checkbox: 24px;

  /* The admin site's sidebar and panel (PHASE_ADMIN A1) — twins of the app's
     HomeColors.balance / onBalance / onBalanceSoft / tagSoft and
     FormColors.panel / divider. No storefront page draws them. */
  --ds-home-balance: #0E3B2C;
  --ds-home-on-balance: #FFFFFF;
  --ds-home-on-balance-soft: #B9DCC9;
  --ds-home-tag-soft: rgba(255, 255, 255, 0.18);
  --ds-form-panel: #FFFFFF;
  --ds-form-divider: #EEEBE6;

  --ds-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
}

/* The storefront's DARK theme — the creator's pick (owner, 2026-09-28); the
   page sets <html data-theme="dark"> from what get-storefront sends. Colours
   only: every other token is shared. The accent inverts to a light button. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --ds-page: #121213;
  --ds-card: #1E1E20;
  --ds-card-pressed: #28282B;
  --ds-pill: #2E2E32;
  --ds-ink: #F5F3F0;
  --ds-body: #A8A39E;
  --ds-label: #77726D;
  --ds-faint: #4A4744;
  --ds-accent: #F2F0ED;
  --ds-on-accent: #1C1C1E;
  --ds-success: #3DBA6F;
  --ds-link: #6AA5FA;
  --ds-danger: #EF4F63;
  --ds-highlight: #FFD23F;
  --ds-on-highlight: #1C1C1E;
  --ds-pending: #F08A2E;
  --ds-pending-soft: #3A2412;
  --ds-on-pending-soft: #F8C99A;
  --ds-sample: #FFE07A;
  --ds-on-sample: #4A3800;
}
:root[data-theme="dark"] .ds-toolbar .active { background: rgba(0, 0, 0, 0.12); }

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--ds-font);
  background: var(--ds-page);
  color: var(--ds-ink);
  -webkit-font-smoothing: antialiased;
}

/* Text */
.ds-title {
  font-size: var(--ds-text-title);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ds-ink);
  margin: 0;
}
.ds-heading {
  font-size: var(--ds-text-heading);
  font-weight: 700;
  color: var(--ds-ink);
  margin: 0;
}
.ds-body {
  font-size: var(--ds-text-body);
  line-height: 1.5;
  color: var(--ds-body);
}
/* Section header: optional small icon (an inline svg, 14px), then the label. */
.ds-section-label {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  margin: var(--ds-space-xl) 0 var(--ds-space-md);
  font-size: var(--ds-text-label);
  font-weight: 600;
  color: var(--ds-label);
}
.ds-section-label svg { width: 14px; height: 14px; }
/* The bold "@name:" that leads a line; the rest stays plain. */
.ds-name { font-weight: 700; color: var(--ds-ink); }

/* Surfaces */
.ds-card {
  background: var(--ds-card);
  border-radius: var(--ds-radius-card);
  padding: var(--ds-space-lg);
  border: 0;
}
/* A card laid out as a row: [checkbox] text … [pill]. */
.ds-card-row {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-md);
  background: var(--ds-card);
  border-radius: var(--ds-radius-card);
  padding: var(--ds-space-lg);
}
.ds-card-row > .ds-grow { flex: 1; min-width: 0; }
a.ds-card, a.ds-card-row { color: inherit; text-decoration: none; }
a.ds-card:hover, a.ds-card-row:hover { background: var(--ds-card-pressed); }
.ds-stack { display: flex; flex-direction: column; gap: var(--ds-space-md); }
.ds-checkbox {
  appearance: none;
  flex: none;
  width: var(--ds-size-checkbox);
  height: var(--ds-size-checkbox);
  margin: 0;
  border-radius: var(--ds-radius-small);
  border: 2px solid var(--ds-faint);
  background: var(--ds-pill);
}
.ds-checkbox:checked { background: var(--ds-accent); border-color: var(--ds-accent); }

/* Pills — one key detail (price, date, place) */
.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-xs);
  flex: none;
  padding: var(--ds-space-xs) var(--ds-space-md);
  border-radius: var(--ds-radius-full);
  background: var(--ds-pill);
  color: var(--ds-ink);
  font-size: var(--ds-text-pill);
  font-weight: 600;
  white-space: nowrap;
}
.ds-pill-dark { background: var(--ds-accent); color: var(--ds-on-accent); }

/* The one dark accent per screen */
.ds-btn-dark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--ds-size-dark-button);
  padding: 0 var(--ds-space-xl);
  border: 0;
  border-radius: var(--ds-radius-full);
  background: var(--ds-accent);
  color: var(--ds-on-accent);
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.ds-btn-dark:disabled { opacity: 0.5; cursor: default; }
/* Floating toolbar at the bottom of list screens (search, filter, add). */
.ds-toolbar {
  position: fixed;
  left: 50%;
  bottom: var(--ds-space-xl);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
  height: var(--ds-size-toolbar);
  padding: 0 var(--ds-space-sm);
  border-radius: var(--ds-radius-full);
  background: var(--ds-accent);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.ds-toolbar button, .ds-toolbar a {
  display: grid;
  place-items: center;
  width: var(--ds-size-toolbar-icon);
  height: var(--ds-size-toolbar-icon);
  border: 0;
  border-radius: var(--ds-radius-full);
  background: transparent;
  color: var(--ds-on-accent);
  cursor: pointer;
}
.ds-toolbar .active { background: rgba(255, 255, 255, 0.12); }