/* Crumb & Co — warm bakery: cream paper, terracotta ink, a serif display. */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #faf4e9;
  --surface: #fffdf8;
  --surface-2: #f3e8d6;
  --border: #e3d4bb;
  --border-strong: #c4ab86;
  --ink: #2b1d14;
  --muted: #6d5844;
  --accent: #b5502b;
  --accent-hover: #9a4425;
  --accent-ink: #ffffff;
  --accent-text: #9c4526;
  --accent-strong: #7d3619;
  --accent-soft: #f7e5d6;
  --accent-border: #dbaa94;
  --success: #4a6b33;
  --success-ink: #ffffff;
  --success-soft: #e5e4d3;
  --success-strong: #4a6b33;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e1ce;
  --warning-strong: #994607;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f2dad0;
  --danger-strong: #b91c1c;
  --chart-1: #b5502b;
  --chart-2: #a18e12;
  --chart-3: #136d48;
  --chart-4: #1596b5;
  --chart-5: #4c4ba5;
  --chart-6: #c165a5;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Karla", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 600;
  --display-tracking: -0.025em;
  --radius-card: 16px;
  --radius-btn: 999px;
  --radius-input: 10px;
  --card-pad: 1.5rem;
  --x-on-photo: #fff9f0;
  --x-grain: rgb(43 29 20 / 0.05);
  --x-scrim: rgb(31 20 12 / 0.55);
  --font-sans: "Karla", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #120804;
  --surface: #2a211d;
  --surface-2: #1e1411;
  --border: #332b27;
  --border-strong: #59524f;
  --ink: #faf4e9;
  --muted: #9d968d;
  --accent: #b5502b;
  --accent-hover: #c06a4b;
  --accent-ink: #ffffff;
  --accent-text: #c5775a;
  --accent-strong: #c5775a;
  --accent-soft: #36180d;
  --accent-border: #5b2816;
  --success: #4a6b33;
  --success-ink: #ffffff;
  --success-soft: #1e1e0e;
  --success-strong: #718c60;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #361905;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #370c09;
  --danger-strong: #d16969;
  --chart-1: #b5502b;
  --chart-2: #a18e12;
  --chart-3: #199764;
  --chart-4: #1596b5;
  --chart-5: #7174d2;
  --chart-6: #c165a5;
}

/* Crumb & Co — paper texture, dotted menu leaders, small flourishes. */

@layer components {
  /* Laid-paper grain over the whole canvas. */
  .grain {
    background-image: radial-gradient(var(--x-grain) 1px, transparent 1px);
    background-size: 22px 22px;
  }

  /* A printed price list: name, dotted leader, price. */
  .leader {
    flex: 1 1 auto;
    margin: 0 0.65rem 0.35rem;
    border-bottom: 2px dotted var(--border-strong);
    opacity: 0.6;
  }

  /* Hand-stamped seal for the bakery mark. */
  .seal {
    border: 1px dashed var(--border-strong);
    border-radius: 999px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .photo-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(31 20 12 / 0.18), var(--x-scrim));
  }
}

@keyframes rise {
  from {
    transform: translateY(22px);
  }
  to {
    transform: translateY(0);
  }
}

[data-inview] {
  animation: rise 0.7s cubic-bezier(0.22, 0.68, 0.32, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  [data-inview] {
    animation: none;
  }
}