/*
 * theme.css — Fieldbrook's design-system values.
 * Neighborhood market: kraft paper, chalkboard gold, ripe produce colour.
 * Opens light; a warmer, deeper set sits under html[data-theme="dark"].
 */

:root {
  --canvas: #f6f0e4;
  --surface: #fbf8f3;
  --surface-2: #efe4cd;
  --border: #e1d5b8;
  --border-strong: #c7b795;
  --ink: #2a2420;
  --muted: #69645d;

  --accent: #c1502e;
  --accent-hover: #a8431f;
  --accent-ink: #fdf8f1;
  --accent-text: #3f6c45;
  --accent-soft: #f2ddd0;
  --accent-strong: #a44427;
  --accent-border: #dcb7a2;

  --success: #4c7a49;
  --success-ink: #fbf8f3;
  --success-soft: #e2ead7;
  --success-strong: #33502f;

  --warning: #c98a2b;
  --warning-ink: #2a2420;
  --warning-soft: #f4e3bd;
  --warning-strong: #8a5a17;

  --danger: #b3401f;
  --danger-ink: #fdf8f1;
  --danger-soft: #f4ddd0;
  --danger-strong: #8a2f15;

  --chart-1: #c1502e;
  --chart-2: #3f6c45;
  --chart-3: #c98a2b;
  --chart-4: #a44427;
  --chart-5: #46707a;
  --chart-6: #7a4a5c;

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 650;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 14px;
  --radius-card: 20px;
  --radius-input: 12px;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --shadow-card: 0 1px 2px rgba(42, 36, 32, 0.05), 0 8px 20px -8px rgba(42, 36, 32, 0.16);
  --shadow-raised: 0 16px 40px -12px rgba(42, 36, 32, 0.3);
  --shadow-btn: 0 1px 2px rgba(42, 36, 32, 0.12);
  --card-pad: 1.5rem;
  --caps: none;
  --caps-tracking: 0.02em;
  --btn-weight: 600;
  --measure: 65ch;
}

html[data-theme="dark"] {
  --canvas: #201b17;
  --surface: #2a231d;
  --surface-2: #342b23;
  --border: #453a2f;
  --border-strong: #5b4c3c;
  --ink: #f3ead9;
  --muted: #b7a894;

  --accent: #d1683f;
  --accent-hover: #e07a4f;
  --accent-ink: #241109;
  --accent-text: #8fc198;
  --accent-soft: #402a1f;
  --accent-strong: #e5a686;
  --accent-border: #55372a;

  --success: #7bab72;
  --success-ink: #16240f;
  --success-soft: #263420;
  --success-strong: #a8cf9d;

  --warning: #d9a441;
  --warning-ink: #241a05;
  --warning-soft: #3c2f14;
  --warning-strong: #eec372;

  --danger: #d1653f;
  --danger-ink: #260f06;
  --danger-soft: #3c2115;
  --danger-strong: #e79271;

  --chart-1: #d1683f;
  --chart-2: #7bab72;
  --chart-3: #d9a441;
  --chart-4: #e5a686;
  --chart-5: #6fa2ac;
  --chart-6: #b3859a;
}

/*
 * app.css — Fieldbrook's own CSS: the kraft-paper ground, the horizontal
 * snap strips (hero photos on a phone, the aisle strip), and the deals
 * wall's one stagger — the page's single orchestrated motion.
 */

/* A warm wash behind the whole page, not a flat fill — kraft paper, not a
   swatch. Entirely tokens: no literal colour lives here. */
body {
  background-image: radial-gradient(ellipse 90% 60% at 50% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%);
  background-color: var(--canvas);
  background-attachment: fixed;
}

/* Horizontal snap strips (the phone hero, the aisle strip) scroll without a
   visible scrollbar — the snap points and the edge peek are the affordance. */
.snap-x::-webkit-scrollbar {
  display: none;
}
.snap-x {
  scrollbar-width: none;
}

/* THE ONE GRID THAT STAGGERS. Every tile rests fully visible by default —
   a visitor with no script, or the pixel check itself, sees the finished
   wall, never a blank one. app.js adds .is-inview once, the first time the
   wall enters the viewport, and only then does the animation (declared with
   fill-mode "both") override the resting state back to its own start. */
.deal-tile {
  opacity: 1;
  transform: none;
}
.deals-grid.is-inview .deal-tile {
  animation: fade-up 560ms var(--ease-out) both;
}