/* Le Bon Pote — shared base for all variations */

:root {
  /* Warm cream palette — never pure white */
  --cream-50: #FAF6EE;
  --cream-100: #F5EFE4;
  --cream-200: #ECE3D1;
  --cream-300: #DDD0B8;
  --cream-400: #C5B69A;

  /* Ink — warm dark, never pure black; AAA contrast on cream */
  --ink-900: #1F1A12;
  --ink-700: #3A3024;
  --ink-500: #5C4F3D;
  --ink-400: #7A6B57;

  /* Honey accent — option 2 (warm gold) */
  --honey-500: #D9A441;
  --honey-600: #C18929;
  --honey-700: #9A6B1A;
  --honey-100: #F4E4C0;

  --rule: rgba(31, 26, 18, 0.18);
  --rule-soft: rgba(31, 26, 18, 0.10);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --max: 640px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream-100);
  color: var(--ink-900);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--ink-900); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--honey-700); }

button { font-family: inherit; cursor: pointer; }

::selection { background: var(--honey-100); color: var(--ink-900); }

/* Reveal-on-scroll utility */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px;
  background: var(--ink-900);
  color: var(--cream-50);
  border: none;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), background .2s;
  min-height: 48px;
}
.btn-primary:hover {
  background: var(--honey-700);
  color: var(--cream-50);
  transform: translateY(-1px);
}
.btn-primary .arrow {
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.btn-primary:hover .arrow { transform: translateX(4px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  background: transparent;
  color: var(--ink-900);
  border: 1.5px solid var(--ink-900);
  font-size: 16px;
  font-weight: 500;
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s, color .2s;
  min-height: 48px;
}
.btn-ghost:hover { background: var(--ink-900); color: var(--cream-50); }

/* Focus styles — visible & accessible */
:focus-visible {
  outline: 3px solid var(--honey-600);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Tally modal */
.tally-modal {
  position: fixed;
  inset: 0;
  background: rgba(31, 26, 18, 0.55);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.tally-modal.open { opacity: 1; pointer-events: auto; }
.tally-modal-inner {
  background: var(--cream-50);
  width: 100%;
  max-width: 600px;
  height: min(720px, 90vh);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
  display: flex;
  flex-direction: column;
}
.tally-modal.open .tally-modal-inner { transform: none; }
.tally-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cream-100);
  border: none;
  font-size: 20px;
  color: var(--ink-900);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tally-modal-close:hover { background: var(--cream-200); }
.tally-modal iframe {
  flex: 1;
  width: 100%;
  border: none;
}