/*
 * Design tokens.
 *
 * Two layers on purpose:
 *   1. Raw palette. The client-approved hex values, named after the colour.
 *   2. Semantic tokens. What a colour is FOR. Components only ever use these.
 *
 * If a component references --faab-espresso directly, that is a bug: it means
 * the colour cannot be changed without hunting through the CSS. Add a semantic
 * token instead.
 *
 * These mirror the theme.json presets so the editor and the front end agree.
 */

:root {
  /* ---- 1. Palette (client-approved, do not invent new values) ---- */
  --faab-espresso: #46271D;
  --faab-brown:    #7D5142;
  --faab-clay:     #A16B59;
  --faab-gold:     #FFB133;
  --faab-nude:     #DEAE9D;
  --faab-blush:    #F2CABC;
  --faab-shell:    #FBEDE8; /* between ivory and blush; needed for warm section bands */
  --faab-ivory:    #FAF6F4;
  --faab-warmgrey: #9C9492;
  --faab-white:    #FFFFFF;

  /* ---- 2. Semantic ---- */
  --faab-bg:            var(--faab-ivory);   /* never stark white, per the brief */
  --faab-bg-warm:       var(--faab-shell);   /* alternating section bands */
  --faab-bg-deep:       var(--faab-espresso);/* header bar, footer */
  --faab-surface:       var(--faab-white);   /* cards lift off the ivory ground */
  --faab-surface-muted: var(--faab-shell);

  --faab-text:        var(--faab-espresso);
  --faab-text-muted:  var(--faab-warmgrey);
  --faab-text-invert: var(--faab-ivory);

  --faab-accent:        var(--faab-clay);
  --faab-accent-hover:  var(--faab-brown);
  --faab-highlight:     var(--faab-gold);   /* sparingly: offers, badges */

  --faab-line:       color-mix(in srgb, var(--faab-espresso) 12%, transparent);
  --faab-line-soft:  color-mix(in srgb, var(--faab-espresso) 7%, transparent);

  /* ---- Typography ---- */
  --faab-font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --faab-font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --faab-fs-xs:   0.75rem;
  --faab-fs-sm:   0.875rem;
  --faab-fs-base: 1rem;
  --faab-fs-lg:   clamp(1.0625rem, 0.4vw + 1rem, 1.125rem);
  --faab-fs-xl:   clamp(1.25rem, 0.9vw + 1rem, 1.5rem);
  --faab-fs-2xl:  clamp(1.625rem, 1.4vw + 1.1rem, 2rem);
  --faab-fs-3xl:  clamp(2rem, 2.6vw + 1.1rem, 2.75rem);
  --faab-fs-4xl:  clamp(2.5rem, 4.4vw + 1rem, 3.75rem);

  --faab-lh-tight: 1.15;
  --faab-lh-body:  1.65;

  /* Small caps eyebrow used above section headings and on brand labels */
  --faab-tracking-wide: 0.08em;

  /* ---- Space (matches theme.json spacingSizes) ---- */
  --faab-space-1: 0.5rem;
  --faab-space-2: 0.75rem;
  --faab-space-3: 1rem;
  --faab-space-4: 1.5rem;
  --faab-space-5: 2rem;
  --faab-space-6: 3rem;
  --faab-space-7: 4.5rem;
  --faab-space-8: 6rem;

  /* ---- Shape ---- */
  --faab-radius-sm:  6px;
  --faab-radius:     12px;
  --faab-radius-lg:  20px;
  --faab-radius-pill: 999px;

  --faab-shadow-soft: 0 1px 2px rgba(70, 39, 29, .04), 0 8px 24px rgba(70, 39, 29, .06);
  --faab-shadow-lift: 0 2px 4px rgba(70, 39, 29, .05), 0 16px 40px rgba(70, 39, 29, .10);

  /* ---- Layout ---- */
  --faab-content: 760px;
  --faab-wide:    1280px;
  --faab-gutter:  clamp(1rem, 4vw, 3rem);

  --faab-ease: cubic-bezier(.2, .7, .3, 1);
  --faab-dur:  180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --faab-dur: 0ms; }
}