/* ============================================================
   Heitova — design tokens. The single source of truth for the look.
   Palette is sampled from the logo: warm paper, the coral circle,
   the mauve torii, and the three small accents (yellow, lilac, green).
   Nothing below this file should hard-code a colour.
   ============================================================ */

:root {
  /* ---- Paper & ink ---- */
  --paper:        #F4F3F1;   /* warm off-white — the logo's own background */
  --paper-2:      #EDE9E7;   /* soft alt section band */
  --paper-3:      #F5EFEF;   /* faint mauve wash */
  --surface:      #FFFFFF;   /* cards */
  --ink:          #1A1A1A;   /* primary text */
  --ink-2:        #4A4544;   /* secondary text */
  --ink-3:        #86807E;   /* muted / captions */
  --line:         #E4DEDC;   /* hairlines */
  --line-strong:  #D2C9C7;

  /* ---- Brand ---- */
  --coral:        #F8483B;   /* the circle — primary action colour */
  --coral-deep:   #D3372B;   /* readable coral on paper, and hover */
  --coral-tint:   #FDEAE8;   /* soft coral wash */
  --mauve:        #D9CBCD;   /* the torii — secondary neutral */
  --mauve-deep:   #A08E92;   /* readable mauve for text/borders */
  --mauve-tint:   #F2EBEC;

  /* ---- Accents (the small marks on the wordmark) ---- */
  --yellow:       #F0E85B;
  --yellow-deep:  #8A8221;   /* accessible yellow-family text */
  --lilac:        #C06AD8;
  --lilac-deep:   #8B3FA3;
  --green:        #C6E9A6;
  --green-deep:   #4F7A2C;

  /* ---- Dark section (footer, feature bands) ---- */
  --ink-dark:     #221F1F;
  --ink-dark-2:   #2E2A2A;

  /* ---- Semantic ---- */
  --bg:           var(--paper);
  --fg:           var(--ink);
  --accent:       var(--coral);
  --accent-ink:   #FFFFFF;   /* text that sits ON the coral */
  --focus:        #3B5BDB;

  /* ---- Typography ----
     Fraunces carries the warmth (headings, prices, the wordmark);
     Inter does the reading. Both degrade to system stacks offline. */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-text:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-200: 0.75rem;    /* 12 — eyebrows, meta */
  --fs-300: 0.8125rem;  /* 13 */
  --fs-400: 1rem;       /* 16 — body */
  --fs-500: 1.0625rem;  /* 17 — lead body */
  --fs-600: 1.25rem;    /* 20 */
  --fs-700: clamp(1.5rem, 3.2vw, 2rem);      /* section headings */
  --fs-800: clamp(2rem, 5vw, 3.25rem);       /* page titles */
  --fs-900: clamp(2.75rem, 8.5vw, 5.5rem);   /* hero display */

  --lh-tight: 1.03;
  --lh-snug:  1.18;
  --lh-body:  1.65;
  --track-eyebrow: .14em;

  /* ---- Space (8pt-ish) ---- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* ---- Radii — rounded, boutique, never pill-shaped cards ---- */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   34px;
  --r-pill: 999px;

  /* ---- Shadows: soft and warm-tinted, never grey ---- */
  --shadow-sm: 0 1px 2px rgba(58,44,44,.05), 0 1px 1px rgba(58,44,44,.04);
  --shadow-md: 0 8px 24px -8px rgba(58,44,44,.16), 0 2px 8px -3px rgba(58,44,44,.08);
  --shadow-lg: 0 28px 64px -20px rgba(58,44,44,.28), 0 10px 28px -12px rgba(58,44,44,.14);
  --shadow-coral: 0 14px 34px -12px rgba(248,72,59,.45);

  /* ---- Layout ---- */
  --container:        1200px;
  --container-narrow: 720px;
  --header-h:         68px;
  --gutter:           var(--sp-5);

  /* ---- Motion ---- */
  --ease:     cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .16s;
  --dur:      .28s;
  --dur-slow: .55s;
}

@media (min-width: 900px) {
  :root { --gutter: var(--sp-6); }
}

/* Accent families, so a category can be tinted by name (accent="lilac"). */
[data-accent="coral"]  { --tone: var(--coral);  --tone-deep: var(--coral-deep);  --tone-tint: var(--coral-tint); }
[data-accent="mauve"]  { --tone: var(--mauve);  --tone-deep: var(--mauve-deep);  --tone-tint: var(--mauve-tint); }
[data-accent="yellow"] { --tone: var(--yellow); --tone-deep: var(--yellow-deep); --tone-tint: #FBF9DE; }
[data-accent="lilac"]  { --tone: var(--lilac);  --tone-deep: var(--lilac-deep);  --tone-tint: #F5EAF8; }
[data-accent="green"]  { --tone: var(--green);  --tone-deep: var(--green-deep);  --tone-tint: #EDF6E3; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}