/* ============================================================================
   Wrapping Bell — Design tokens  (Luxury edition)
   Colours, spacing, radii, shadows, gradients, textures and the type scale.
   Extends the core brand palette with editorial luxury tones (ivory, champagne
   gold, blush, forest sage) for depth and warmth.
   ============================================================================ */
/* Script font for the "Wrappingbells" brand wordmark (logo). */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

:root {
  /* --- Core brand palette (exact supplied hex) --- */
  --sage-green:   #73837A;
  --light-grey:   #F3F1F1;
  --white:        #FFFFFF;
  --black:        #000000;
  --dark-olive:   #59665F;
  --soft-beige:   #E7E2D8;
  --warm-brown:   #A9784A;
  --deep-brown:   #6B4A2D;
  --olive-green:  #7A8450;
  --burgundy-red: #9C2342;

  /* --- Luxury extension tones --- */
  --ivory:        #F8F4ED;  /* primary warm background */
  --cream:        #FCFAF5;  /* lifted surfaces */
  --champagne:    #C9A86A;  /* gold accent */
  --champagne-dk: #A9844B;  /* deep gold for text/borders */
  --blush:        #E9D8D2;  /* muted blush */
  --forest:       #3C463E;  /* deep forest sage (dark sections) */
  --forest-soft:  #4A554C;

  /* --- Semantic roles --- */
  --bg:            var(--ivory);
  --surface:       var(--cream);
  --surface-2:     #FFFFFF;
  --surface-beige: var(--soft-beige);
  --ink:           #20251f;
  --ink-soft:      #2c322b;
  --ink-muted:     #5f655c;
  --on-dark:       #F4EFE6;
  --accent:        var(--warm-brown);
  --accent-dark:   var(--deep-brown);
  --gold:          var(--champagne);
  --progress:      var(--olive-green);
  --urgent:        var(--burgundy-red);
  --line:          rgba(60, 70, 62, 0.14);
  --line-soft:     rgba(60, 70, 62, 0.08);
  --focus-ring:    var(--olive-green);

  /* --- Gradients & glass --- */
  --grad-sage:    linear-gradient(135deg, #7d8c82 0%, #59665F 60%, #3C463E 100%);
  --grad-forest:  linear-gradient(160deg, #4A554C 0%, #3C463E 100%);
  --grad-gold:    linear-gradient(135deg, #E0C68C 0%, #C9A86A 50%, #A9844B 100%);
  --grad-cream:   linear-gradient(180deg, #FCFAF5 0%, #F4EEE3 100%);
  --grad-burgundy:linear-gradient(135deg, #B12B4D 0%, #9C2342 60%, #7d1a33 100%);
  --glass-bg:     rgba(248, 244, 237, 0.72);
  --glass-border: rgba(255, 255, 255, 0.55);
  --radial-warm:  radial-gradient(60% 80% at 50% 0%, rgba(201,168,106,0.14), transparent 70%);

  /* subtle paper grain overlay (very low opacity) */
  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  /* --- Type --- */
  --font-serif:  "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:   "Jost", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script: "Great Vibes", "Parisienne", "Brush Script MT", cursive;

  /* Fluid 8-step type scale */
  --t-xs:   clamp(0.72rem, 0.69rem + 0.15vw, 0.80rem);
  --t-sm:   clamp(0.82rem, 0.78rem + 0.20vw, 0.92rem);
  --t-base: clamp(0.96rem, 0.91rem + 0.25vw, 1.08rem);
  --t-md:   clamp(1.14rem, 1.04rem + 0.45vw, 1.4rem);
  --t-lg:   clamp(1.45rem, 1.25rem + 0.9vw, 2.05rem);
  --t-xl:   clamp(1.95rem, 1.55rem + 1.7vw, 3.05rem);
  --t-2xl:  clamp(2.2rem, 1.7rem + 2.6vw, 4.4rem);
  --t-3xl:  clamp(2.5rem, 1.9rem + 3.4vw, 5.6rem);

  --leading-tight: 1.08;
  --leading-snug:  1.28;
  --leading-body:  1.62;
  --tracking-label: 0.22em;
  --measure: 66ch;

  /* --- Spacing (8px grid) --- */
  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 2.5rem;  --s-6: 3rem;   --s-8: 4rem;    --s-10: 5rem;
  --section-y: clamp(3.5rem, 7vw, 8rem);

  /* --- Radii --- */
  --r-sm: 10px;  --r-md: 18px;  --r-lg: 26px;  --r-xl: 36px;  --r-pill: 999px;

  /* --- Shadows (warm, layered, soft) --- */
  --shadow-xs: 0 1px 2px rgba(60,70,62,0.06);
  --shadow-sm: 0 4px 16px rgba(60,70,62,0.08);
  --shadow-md: 0 14px 40px rgba(60,70,62,0.12);
  --shadow-lg: 0 30px 70px rgba(60,70,62,0.18);
  --shadow-gold: 0 10px 30px rgba(169,132,75,0.28);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  --container: 1220px;
  --container-narrow: 760px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --speed: 240ms;
}

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