/* ==========================================================================
   Milaa.nl — Design Tokens  ("Soft Luxury")
   Single source of truth for color, type, spacing, radius, shadow, motion.
   Port these into the CodeIgniter theme as the global :root layer.
   ========================================================================== */

:root {
  /* ---- Color: surfaces ---- */
  --c-bg:            #F7F1E8; /* warm ivoor / soft beige canvas */
  --c-bg-2:         #F1E9DC; /* slightly deeper section band */
  --c-surface:      #FFFFFF; /* cards, panels */
  --c-surface-alt:  #FBF7F0; /* subtle raised surface */

  /* ---- Color: brand & accents ---- */
  --c-brand:        #C9A86A; /* champagne goud — primary accent */
  --c-brand-deep:   #A9854B; /* gold hover / borders */
  --c-brand-soft:   #EADFC6; /* gold tint backgrounds */
  --c-accent:       #C9849A; /* dusty rose / mauve — secondary */
  --c-accent-soft:  #F0DCE1; /* rose tint */

  /* ---- Color: trust & ink ---- */
  --c-trust:        #2B3A52; /* diep navy */
  --c-taupe:        #8C7E70; /* warm taupe */
  --c-ink:          #2A2420; /* primary text */
  --c-ink-soft:     #4A4138;
  --c-muted:        #6B6258; /* secondary text */
  --c-line:         #E4D9C8; /* hairline borders on ivory */
  --c-line-2:       #EFE7DA;

  /* ---- Color: action ---- */
  --c-cta:          #B06A4F; /* warm terracotta / deep rose CTA */
  --c-cta-hover:    #97583F;
  --c-sale:         #7C2B33; /* subtiel bordeaux — never fel rood */
  --c-success:      #5B7556;
  --c-star:         #C9A86A;

  /* ---- Typography ---- */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-hero:    clamp(2.6rem, 5.2vw, 4.4rem);
  --fs-h1:      clamp(2rem, 3.6vw, 3rem);
  --fs-h2:      clamp(1.6rem, 2.6vw, 2.2rem);
  --fs-h3:      1.3rem;
  --fs-lg:      1.125rem;
  --fs-base:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  --lh-tight:   1.12;
  --lh-snug:    1.32;
  --lh-body:    1.65;

  --tracking-wide: 0.18em;  /* eyebrow / label uppercase */
  --tracking:      0.02em;

  /* ---- Spacing scale (8pt-ish, airy) ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  --container: 1240px;
  --container-narrow: 880px;

  /* ---- Radius ---- */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px; --r-pill: 999px;

  /* ---- Shadow (soft, warm-tinted, never harsh) ---- */
  --sh-1: 0 1px 2px rgba(42,36,32,.05);
  --sh-2: 0 6px 22px rgba(42,36,32,.07);
  --sh-3: 0 18px 50px rgba(42,36,32,.10);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .35s;
  --dur-fast: .18s;
}