/*
 * theme.css — Padaria Panjim's design-system values.
 *
 * Bold-geometric bakery signboard: flat terracotta, warm cream, ink-brown
 * text, square corners, thick strokes. Opens light; a warmer dark brown
 * variant sits under html[data-theme="dark"].
 */

:root {
  --canvas: #fbf3e7;
  --surface: #fdfaf4;
  --surface-2: #f2e2c9;
  --border: #e6d5b8;
  --border-strong: #cba579;
  --ink: #241b15;
  --muted: #676059;
  --accent: #c8451f;
  --accent-hover: #a93a1b;
  --accent-ink: #fdfaf4;
  --accent-text: #8c2e12;
  --accent-strong: #a93a1b;
  --accent-soft: #f3ddc9;
  --accent-border: #e0b48c;
  --success: #3f7d32;
  --success-ink: #fdfaf4;
  --success-soft: #e2ecd6;
  --success-strong: #2f5f26;
  --warning: #a5730b;
  --warning-ink: #fdfaf4;
  --warning-soft: #f2e6c8;
  --warning-strong: #7d5808;
  --danger: #a3271e;
  --danger-ink: #fdfaf4;
  --danger-soft: #f2dad3;
  --danger-strong: #841e17;
  --chart-1: #c8451f;
  --chart-2: #1f6b63;
  --chart-3: #c98a1f;
  --chart-4: #6b7a2a;
  --chart-5: #8c3d6a;
  --chart-6: #2c5c8c;

  /* This app's own tokens (--x-*) */
  --x-band: #c8451f;
  --x-band-ink: #fdfaf4;
  --x-ink-band: #1c130d;
  --x-ink-band-ink: #f5ead9;
  --x-teal: #1f6b63;
  --x-teal-ink: #fdfaf4;
  --x-paper: #f7ecd6;
  --x-paper-2: #f4e6c9;

  --font-display: "Baloo 2", ui-rounded, system-ui, sans-serif;
  --font-body: "Karla", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Karla", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 0px;
  --radius-card: 0px;
  --radius-input: 0px;
  --border-w: 2px;
  --border-strong-w: 3px;
  --shadow-card: none;
  --shadow-raised: 0 18px 36px -14px color-mix(in srgb, var(--ink) 45%, transparent);
  --shadow-btn: none;
  --card-pad: 1.75rem;
  --caps: none;
  --btn-weight: 700;
  --measure: 62ch;
}

html[data-theme="dark"] {
  --canvas: #201712;
  --surface: #2a1e17;
  --surface-2: #34261b;
  --border: #4a3627;
  --border-strong: #6b4f39;
  --ink: #f6ead9;
  --muted: #c7b6a2;
  --accent: #e2632f;
  --accent-hover: #ef7743;
  --accent-ink: #201712;
  --accent-text: #f4915f;
  --accent-strong: #f4915f;
  --accent-soft: #3d2519;
  --accent-border: #6a4128;
  --success: #7cbf68;
  --success-ink: #16210f;
  --success-soft: #23381f;
  --success-strong: #a6dd94;
  --warning: #dba648;
  --warning-ink: #241a06;
  --warning-soft: #3a2e13;
  --warning-strong: #ecc47c;
  --danger: #e2726a;
  --danger-ink: #250f0c;
  --danger-soft: #3c211c;
  --danger-strong: #f0a099;
  --chart-1: #e2632f;
  --chart-2: #4fa39c;
  --chart-3: #d9a441;
  --chart-4: #9aa855;
  --chart-5: #c17fab;
  --chart-6: #6a8fc2;

  --x-band: #a93a1b;
  --x-band-ink: #f6ead9;
  --x-ink-band: #120c08;
  --x-ink-band-ink: #f6ead9;
  --x-teal: #4fa39c;
  --x-teal-ink: #120c08;
  --x-paper: #362819;
  --x-paper-2: #3f2e1d;
}

/*
 * app.css — Rosa's Padaria's own screens: the terracotta hero band, the
 * parallaxing counter photo, the dotted menu leaders, the pinned paper
 * quote-notes, the perforated order-ticket, and the closing ink band.
 * Tokens only — colours come from public/theme.css.
 */

/* ---- Hero band: a flat terracotta panel, corners square. ---- */
.hero-band {
  background: var(--x-band);
  border-bottom: var(--border-strong-w, 3px) solid var(--ink);
}

/* ---- Closing statement: the palette reversed. ---- */
.closing-band {
  background: var(--x-ink-band);
}

/* ---- The counter photograph: full width, ~520px tall, parallaxing. ---- */
.counter-frame {
  position: relative;
  overflow: hidden;
  height: clamp(280px, 42vw, 520px);
  border: var(--border-strong-w, 3px) solid var(--ink);
  background: var(--surface-2);
}
.counter-frame img {
  position: absolute;
  inset: -12% 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  display: block;
  will-change: transform;
}
html.reduced-motion .counter-frame img {
  transform: none !important;
}

/* ---- Today's bakes: a dotted leader between name and price. ---- */
.menu-leader {
  flex: 1 1 auto;
  min-width: 1rem;
  height: 0;
  align-self: end;
  margin-bottom: 0.4em;
  border-bottom: 3px dotted var(--border-strong);
}

/* ---- Customer quotes: pinned paper notes, not identical cards. ---- */
.paper-note {
  position: relative;
  width: 100%;
  max-width: 21rem;
  background: var(--x-paper);
  border: 2px solid var(--ink);
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: 8px 8px 0 0 color-mix(in srgb, var(--ink) 78%, transparent);
}
.paper-note::before {
  content: "";
  position: absolute;
  top: -0.65rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: var(--accent);
  border: 2px solid var(--ink);
}
.paper-note-1 { transform: rotate(-2deg); background: var(--x-paper); }
.paper-note-2 { transform: rotate(1.5deg); background: var(--x-paper-2); margin-top: 1.5rem; }
.paper-note-3 { transform: rotate(-1.5deg); background: var(--x-paper); }

/* ---- Opening hours / pre-order: a stamped, perforated order ticket. ---- */
.ticket {
  position: relative;
  background: var(--surface);
  border: var(--border-strong-w, 3px) solid var(--ink);
}
.ticket::before,
.ticket::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  background-image: radial-gradient(circle, var(--canvas) 7px, transparent 7.5px);
  background-size: 28px 28px;
  background-position: 10px center;
  background-repeat: repeat-x;
}
.ticket::before { top: -11px; }
.ticket::after { bottom: -11px; }