/* Direction: Ember & Sage — minimal warm atelier: bone paper, espresso ink, amber wax, a literary serif */
/* 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: #f7f3ea;
  --surface: #fffdf7;
  --surface-2: #f0e9d8;
  --border: #e3d8c2;
  --border-strong: #b4afa6;
  --ink: #20180f;
  --muted: #75664f;
  --accent: #b06a35;
  --accent-hover: #965a2d;
  --accent-ink: #190f07;
  --accent-text: #8a4f22;
  --accent-strong: #7c4416;
  --accent-soft: #efe1cb;
  --accent-border: #d7b599;
  --success: #3f6f4f;
  --success-ink: #ffffff;
  --success-soft: #e1e3d7;
  --success-strong: #3a6649;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #efe0cf;
  --warning-strong: #994607;
  --danger: #a13c2e;
  --danger-ink: #ffffff;
  --danger-soft: #edddd3;
  --danger-strong: #a13c2e;
  --chart-1: #b06a35;
  --chart-2: #838e1f;
  --chart-3: #0d7864;
  --chart-4: #0d91ca;
  --chart-5: #6b51a5;
  --chart-6: #cc6b93;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --display-weight: 500;
  --display-tracking: -0.02em;
  --radius-btn: 999px;
  --radius-input: 10px;
  --radius-card: 18px;
  --card-pad: 22px;
  --shadow-card: 0 1px 2px rgb(32 24 15 / 0.05), 0 18px 40px -24px rgb(32 24 15 / 0.25);
  --x-band: #1b1409;
  --x-on-photo: #fffdf7;
  --x-on-photo-muted: #cfc0a6;
  --gradient-wax: linear-gradient(165deg, #efe1cb 0%, #f7f3ea 62%, #f2e7d2 100%);
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #150d06;
  --surface: #2c251f;
  --surface-2: #211912;
  --border: #362f29;
  --border-strong: #5b5651;
  --ink: #f7f3ea;
  --muted: #9d978f;
  --accent: #b06a35;
  --accent-hover: #bc8053;
  --accent-ink: #190f07;
  --accent-text: #bc8154;
  --accent-strong: #bc8154;
  --accent-soft: #372110;
  --accent-border: #5b371b;
  --success: #3f6f4f;
  --success-ink: #ffffff;
  --success-soft: #1e2316;
  --success-strong: #759981;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #381c07;
  --warning-strong: #c57a40;
  --danger: #a13c2e;
  --danger-ink: #ffffff;
  --danger-soft: #34170f;
  --danger-strong: #bc7369;
  --chart-1: #b06a35;
  --chart-2: #96a237;
  --chart-3: #0f957d;
  --chart-4: #279ed7;
  --chart-5: #876ec5;
  --chart-6: #d37199;
}

html {
  scroll-behavior: smooth;
}

.eyebrow {
  @apply text-xs font-semibold uppercase text-accent-text;
  letter-spacing: var(--eyebrow-tracking, 0.22em);
}

.band-soft {
  background: var(--gradient-wax);
}

.band-dark {
  background-color: var(--x-band);
  color: var(--x-on-photo);
}

.lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.lift:active {
  transform: translateY(-1px);
}

@keyframes flame-flicker {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  40% {
    transform: scale(1.12) rotate(-2deg);
    opacity: 0.85;
  }
  70% {
    transform: scale(0.95) rotate(1.5deg);
    opacity: 0.95;
  }
}

.flame-pulse {
  animation: flame-flicker 2.6s ease-in-out infinite;
  transform-origin: 50% 90%;
}

html.reduced-motion .flame-pulse {
  animation: none;
}

html.reduced-motion {
  scroll-behavior: auto;
}