/* ============================================================
   De Happytail — design tokens
   Colors, typography, spacing, radius, shadows, motion.
   ============================================================ */

:root {
  /* Brand colors */
  --c-rose:        #E9ABB7;
  --c-rose-600:    #D68A99;
  --c-rose-100:    #F7DCE2;
  --c-sage:        #9ABA6B;
  --c-sage-600:    #7E9D54;
  --c-sage-100:    #E1ECCF;
  --c-mustard:     #D0B30E;
  --c-mustard-600: #A98F0A;
  --c-mustard-800: #6E5D07;
  --c-cream:       #FDFDFD;
  --c-cream-100:   #F7F1EE;     /* warm tinted band */
  --c-ink:         #373737;
  --c-ink-80:      rgba(55, 55, 55, 0.80);
  --c-ink-60:      rgba(55, 55, 55, 0.60);
  --c-ink-20:      rgba(55, 55, 55, 0.20);
  --c-ink-10:      rgba(55, 55, 55, 0.10);

  /* Semantic */
  --c-bg:            var(--c-cream);
  --c-bg-tint:       var(--c-cream-100);
  --c-text:          var(--c-ink);
  --c-text-muted:    var(--c-ink-60);
  --c-accent:        var(--c-rose);
  --c-accent-hover:  var(--c-rose-600);
  --c-natural:       var(--c-sage);
  --c-natural-hover: var(--c-sage-600);
  --c-highlight:     var(--c-mustard);
  --c-border:        var(--c-ink-10);
  --c-focus:         var(--c-sage-600);

  /* Typography — display serif + clean sans + handwritten script */
  --font-display: "DM Serif Display", "Cormorant Garamond", Georgia, serif;
  --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script:  "Homemade Apple", "Brush Script MT", cursive;

  /* Fluid type scale */
  --fs-hero: clamp(2.5rem, 1.5rem + 4vw, 4.75rem);
  --fs-h1:   clamp(2rem,  1.3rem + 3vw, 3rem);
  --fs-h2:   clamp(1.5rem, 1.15rem + 1.6vw, 2.125rem);
  --fs-h3:   clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  --fs-body: 1.0625rem;        /* 17px */
  --fs-small: 0.9375rem;
  --fs-micro: 0.8125rem;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.65;
  --lh-relaxed: 1.8;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-eyebrow: 0.14em;

  /* Spacing (4-pt scale) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* Shadows — soft, warm */
  --shadow-soft: 0 6px 24px rgba(55, 55, 55, 0.08);
  --shadow-lift: 0 12px 40px rgba(55, 55, 55, 0.12);
  --shadow-pop:  0 24px 60px rgba(55, 55, 55, 0.18);
  --shadow-ring: 0 0 0 3px var(--c-focus);

  /* Motion */
  --motion-fast: 180ms;
  --motion-base: 320ms;
  --motion-slow: 600ms;
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container-max:    1180px;
  --container-narrow: 760px;
  --container-prose:  640px;
  --container-pad:    clamp(1rem, 4vw, 2rem);
  --nav-h:            72px;
  --banner-h:         44px;

  transition: --banner-h var(--motion-base) var(--ease-out);
}

@property --banner-h {
  syntax: "<length>";
  inherits: true;
  initial-value: 44px;
}