/* ============================================================
   Malsoon — Design Tokens
   Majid restyles here. EVERY color / space / radius / type
   value the site uses is a CSS custom property in this file.
   Changing a value here never touches functionality.
   ============================================================ */

:root {
  /* --- Brand palette (from branding.png) --- */
  --coral:      #FF6B4A;   /* Coral Orange — primary accent */
  --peach:      #FFAD8A;   /* Coral Peach   — soft accent */
  --teal:       #006A6E;   /* Deep Teal     — depth accent */
  --seafoam:    #A7D5C9;   /* Seafoam       — calm accent */
  --sunshine:   #FFC857;   /* Sunshine      — highlight */
  --charcoal:   #1E1E1E;   /* Charcoal      — text */
  --cream:      #FAF7F2;   /* Soft Cream    — background */

  /* --- Semantic roles --- */
  --bg:              var(--cream);
  --bg-alt:          #F3EEE6;   /* slightly deeper cream for banded sections */
  --surface:         #FFFFFF;   /* cards */
  --text:            var(--charcoal);
  --text-muted:      rgba(30, 30, 30, 0.62);
  --text-faint:      rgba(30, 30, 30, 0.42);
  --accent:          var(--coral);
  --accent-strong:   #F0512E;   /* coral pressed */
  --accent-soft:     rgba(255, 107, 74, 0.10);
  --border:          rgba(30, 30, 30, 0.10);
  --border-strong:   rgba(30, 30, 30, 0.16);
  --ok:              var(--teal);
  --warn:            var(--coral);

  /* --- Typography --- */
  --font-heading: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-arabic:  "Plex Arabic", "Inter", -apple-system, sans-serif;

  --fs-hero:    clamp(2.4rem, 6vw, 4.2rem);
  --fs-h1:      clamp(2rem, 4.5vw, 3rem);
  --fs-h2:      clamp(1.5rem, 3.2vw, 2.2rem);
  --fs-h3:      1.25rem;
  --fs-lead:    clamp(1.05rem, 2vw, 1.35rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-tiny:    0.8125rem;

  --lh-tight:   1.15;
  --lh-normal:  1.65;

  /* --- Spacing scale --- */
  --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:      1140px;
  --container-narrow: 760px;
  --gutter:         clamp(1.25rem, 5vw, 3rem);

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

  /* --- Shadows --- */
  --shadow-sm:  0 1px 3px rgba(30, 30, 30, 0.06);
  --shadow-md:  0 8px 30px rgba(30, 30, 30, 0.08);
  --shadow-lg:  0 20px 60px rgba(30, 30, 30, 0.12);
  --shadow-coral: 0 12px 34px rgba(255, 107, 74, 0.30);

  /* --- Motion --- */
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   160ms;
  --dur:        280ms;
  --dur-slow:   600ms;

  /* --- Waveform motif --- */
  --wave-bar-w:    4px;
  --wave-gap:      3px;
  --wave-color:    var(--coral);
  --wave-color-2:  var(--peach);
}