/* ==========================================================
   DESIGN TOKENS — Alaa Soueid SLP
   ========================================================== */
:root {
  /* --- Colour Palette --- */
  --cream:         #FFF8F0;
  --cream-warm:    #FFF2E6;
  --peach-light:   #FFE8D6;
  --peach:         #FFD9C0;
  --peach-deep:    #FFC9A8;
  --apricot:       #F4A07A;
  --apricot-hover: #EC8E65;
  --blush:         #F9C5B0;
  --blush-light:   #FDDDD0;
  --rose:          #F0B8A8;
  --taupe:         #5C4A3C;
  --taupe-light:   #8A7060;
  --taupe-muted:   #B8A090;
  --white:         #FFFFFF;

  /* --- Semantic Colours --- */
  --bg:            var(--cream);
  --bg-alt:        var(--peach-light);
  --bg-card:       var(--white);
  --text-primary:  var(--taupe);
  --text-secondary:var(--taupe-light);
  --text-muted:    var(--taupe-muted);
  --accent:        var(--apricot);
  --accent-hover:  var(--apricot-hover);
  --border:        var(--peach);
  --border-light:  var(--peach-light);

  /* --- Typography --- */
  --font-heading:  'Nunito', 'Trebuchet MS', sans-serif;
  --font-body:     'DM Sans', 'Segoe UI', sans-serif;

  --fs-xs:   clamp(0.75rem,  1.5vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 1.8vw, 0.9375rem);
  --fs-base: clamp(1rem,     2vw,   1.0625rem);
  --fs-md:   clamp(1.125rem, 2.2vw, 1.25rem);
  --fs-lg:   clamp(1.25rem,  2.5vw, 1.5rem);
  --fs-xl:   clamp(1.5rem,   3vw,   2rem);
  --fs-2xl:  clamp(1.875rem, 4vw,   2.75rem);
  --fs-3xl:  clamp(2.25rem,  5vw,   3.5rem);
  --fs-4xl:  clamp(2.75rem,  6vw,   4.5rem);

  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-normal: 1.6;
  --lh-relaxed:1.8;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-xbold:  800;

  /* --- Spacing --- */
  --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;

  /* --- Border Radius --- */
  --radius-sm:  0.5rem;
  --radius-md:  1rem;
  --radius-lg:  1.5rem;
  --radius-xl:  2rem;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:  0 2px 8px rgba(92, 74, 60, 0.08);
  --shadow-md:  0 4px 20px rgba(92, 74, 60, 0.12);
  --shadow-lg:  0 8px 40px rgba(92, 74, 60, 0.16);
  --shadow-xl:  0 16px 60px rgba(92, 74, 60, 0.20);

  /* --- Transitions --- */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --t-fast:     0.2s;
  --t-base:     0.4s;
  --t-slow:     0.6s;
  --t-xslow:    0.8s;

  /* --- Layout --- */
  --container:  1200px;
  --container-sm: 760px;
  --nav-h:      72px;
}