/**
 * Värmdös Hunddagis & Djurpensionat AB
 * Design tokens — "Paws & Palms Signature" (Organic Luxury)
 *
 * Values are taken from Design/premium_canine_collective/DESIGN.md so the
 * built theme and the design source stay in step.
 */

:root {
  /* --- Primary: grounded forest green ------------------------------- */
  --vh-primary:            #266a00;
  --vh-primary-container:  #328600;
  --vh-primary-vivid:      #47a11a;
  --vh-deep-forest:        #357914;
  --vh-on-primary:         #ffffff;
  --vh-on-primary-container: #f8ffee;
  --vh-primary-fixed:      #9afa6c;
  --vh-primary-wash:       rgba(38, 106, 0, 0.08);

  /* --- Secondary / neutral ------------------------------------------ */
  --vh-secondary:          #5d5e60;
  --vh-secondary-container:#e0dfe1;
  --vh-bark:               #494949;

  /* --- Surfaces: warm off-white, never pure white ------------------- */
  --vh-surface:            #fbf9f8;
  --vh-soft-stone:         #f5f5f7;
  --vh-surface-lowest:     #ffffff;
  --vh-surface-low:        #f5f3f3;
  --vh-surface-container:  #efeded;
  --vh-surface-high:       #e9e8e7;
  --vh-surface-highest:    #e3e2e2;
  --vh-surface-dim:        #dbdad9;
  --vh-inverse-surface:    #303030;
  --vh-inverse-on-surface: #f2f0f0;

  /* --- Text --------------------------------------------------------- */
  --vh-on-surface:         #1b1c1c;
  --vh-on-surface-variant: #404a39;
  --vh-outline:            #707a67;
  --vh-outline-variant:    #bfcab4;
  --vh-outline-muted:      rgba(112, 122, 103, 0.3);
  --vh-hairline:           rgba(0, 0, 0, 0.05);

  /* --- Feedback ----------------------------------------------------- */
  --vh-error:              #ba1a1a;
  --vh-error-container:    #ffdad6;
  --vh-on-error-container: #93000a;

  /* --- Glass -------------------------------------------------------- */
  --vh-glass-fill:         rgba(255, 255, 255, 0.85);
  --vh-glass-border:       rgba(255, 255, 255, 0.6);
  --vh-glass-blur:         blur(12px);

  /* --- Typography ----------------------------------------------------
     Two contemporary grotesks. Schibsted Grotesk is a Nordic face with
     enough character to carry headlines; Manrope is rounder and quieter
     for running text, so the two stay distinguishable. */
  --vh-font-headline: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vh-font-body:     'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Sans headlines need more weight and tighter tracking than a serif did. */
  --vh-weight-headline: 600;
  --vh-track-headline:  -0.035em;

  /* The scale used to run from 68px headlines down to 12px table labels, which
     left running text and price tables looking undersized next to the display
     type. Both ends move toward each other: headlines lose their tallest step,
     body and label sizes gain one. Ratios inside each group are unchanged. */
  --vh-t-headline-xl: clamp(2rem, 1.25rem + 3vw, 3.5rem);     /*  32 → 56 */
  --vh-t-headline-lg: clamp(1.7rem, 1.3rem + 1.75vw, 2.5rem); /*  27 → 40 */
  --vh-t-headline-md: clamp(1.3rem, 1.12rem + 0.8vw, 1.75rem);/*  21 → 28 */
  --vh-t-headline-sm: 1.15rem;
  --vh-t-body-lg:     1.1875rem;                              /*  19 */
  --vh-t-body:        1.0625rem;                              /*  17 */
  --vh-t-label:       0.9375rem;                              /*  15 */
  --vh-t-label-sm:    0.8125rem;                              /*  13 */

  /* --- Shape -------------------------------------------------------- */
  --vh-r-sm:    0.25rem;
  --vh-r:       0.5rem;
  --vh-r-md:    0.75rem;
  --vh-r-lg:    1rem;
  --vh-r-xl:    1.5rem;
  --vh-r-2xl:   2rem;
  --vh-r-full:  9999px;

  /* --- Spacing ------------------------------------------------------ */
  --vh-gutter:      1.5rem;
  --vh-margin:      clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --vh-container:   1280px;
  --vh-section:     clamp(4rem, 2rem + 7vw, 7.5rem);

  /* --- Elevation: ambient softness, never hard edges ---------------- */
  --vh-shadow-sm:   0 4px 16px rgba(71, 161, 26, 0.04);
  --vh-shadow:      0 10px 40px rgba(71, 161, 26, 0.05);
  --vh-shadow-lg:   0 20px 60px rgba(27, 28, 28, 0.08);
  --vh-shadow-glass:0 4px 30px rgba(0, 0, 0, 0.04);

  /* --- Motion ------------------------------------------------------- */
  --vh-ease:  cubic-bezier(0.4, 0, 0.2, 1);
  --vh-fast:  0.2s var(--vh-ease);
  --vh-slow:  0.4s var(--vh-ease);
}