/* Design tokens: Concept 1, The Retreat.
   Warm oak, bark and cream; sage and moss for calm; terracotta reserved for Book. Light, daylit, no black. */
:root {
  /* Colour: earthy and muted */
  --c-cream: #F6F0E4;
  --c-ivory: #FBF8F1;
  --c-linen: #EBE0CB;
  --c-sand: #D9C8A8;
  --c-bark: #3A2B1F;
  --c-bark-2: #5B4837;
  --c-oak: #B58A5B;
  --c-oak-deep: #86582F;
  --c-sage: #9AA994;
  --c-sage-wash: #E4E6D6;
  --c-sage-deep: #4C6150;
  --c-olive: #6B6B3A;
  --c-moss: #56684A;
  --c-terra: #A4553A;
  --c-terra-deep: #8E452D;
  --c-terra-hover: #7A3A25;
  --c-error: #8C3A2B;

  /* Roles */
  --ink: var(--c-bark);
  --ink-soft: var(--c-bark-2);
  --ground: var(--c-cream);
  --line: var(--c-sand);

  /* Type: Cormorant Garamond for display and numerals, Hanken Grotesk for reading */
  --f-display: "Cormorant Garamond", "Cormorant Fallback", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-text: "Hanken Grotesk", "Hanken Fallback", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --t-xs: 1rem;
  --t-sm: 1rem;
  --t-base: 1.125rem;
  --t-md: clamp(1.375rem, 1.2rem + .6vw, 1.5rem);
  --t-lg: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  --t-xl: clamp(2.375rem, 1.6rem + 3.4vw, 4rem);
  --t-2xl: clamp(2.5rem, 1.9rem + 4.6vw, 5.25rem);
  --t-pull: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --t-num: clamp(3rem, 2.2rem + 4vw, 5rem);

  /* Space, 8px base */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px; --s-10: 160px;
  --gutter: 20px;          /* side gutter: 20px on phones, then grows smoothly with the screen (see the min-width rule below) */
  --wrap: 1180px;
  --section-y: 56px;

  /* Shape: pill for Book only, the arch is the signature shape */
  --r-xs: 4px; --r-sm: 10px; --r-md: 20px;
  --r-arch: 999px 999px 24px 24px;
  --r-pill: 999px;

  /* Shadow, warm never grey */
  --shadow-1: 0 1px 2px rgba(58,43,31,.08), 0 6px 18px -8px rgba(58,43,31,.14);
  --shadow-2: 0 2px 4px rgba(58,43,31,.08), 0 18px 40px -16px rgba(58,43,31,.22);

  /* Motion */
  --dur-1: 160ms; --dur-2: 420ms; --dur-3: 900ms;
  --ease-out: cubic-bezier(.22,.7,.18,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  /* Linen grain and thread */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .17 0 0 0 0 .12 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  --thread: repeating-linear-gradient(0deg, rgba(58,43,31,.022) 0 1px, transparent 1px 3px);
}
@media (min-width: 720px) { :root { --gutter: clamp(32px, 4.6vw, 88px); --section-y: 88px; } }
@media (min-width: 1100px) { :root { --section-y: 84px; } }
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  :root { --grain: none; --thread: none; }
}

/* Bridges: the shared widgets (booking, assessment, feed, newsletter) and the learner area read these names */
:root {
  --c-bg: var(--c-cream); --c-surface: var(--c-ivory); --c-ink: var(--c-bark); --c-muted: var(--c-bark-2); --c-line: var(--c-sand);
  --c-accent: var(--c-terra-deep); --c-accent-ink: var(--c-ivory); --c-accent-soft: var(--c-sage-wash);
  --c-ok: var(--c-sage-deep); --c-bad: var(--c-error); --c-focus: var(--c-sage-deep);
  --r-1: var(--r-sm); --r-2: var(--r-md);

  /* Learner area (/learn/) */
  --lrn-bg: var(--c-cream); --lrn-surface: var(--c-ivory); --lrn-ink: var(--c-bark); --lrn-muted: var(--c-bark-2);
  --lrn-line: var(--c-sand); --lrn-primary: var(--c-sage-deep); --lrn-on-primary: var(--c-ivory); --lrn-accent: var(--c-terra-deep);
  --lrn-sage: var(--c-sage-wash); --lrn-radius: var(--r-md);
  --lrn-font-display: var(--f-display); --lrn-font-text: var(--f-text); --lrn-font-ui: var(--f-text);
}