/* =========================================================================
   SONAL STUDIO — Brand Foundations
   Colors, typography, spacing, radii, shadows
   Easy-breezy pastel palette · Professional but warm · Trustworthy + cosy
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Pinyon+Script&family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&display=swap");

:root {
  /* ---------- PASTEL PALETTE (the "soft four") ---------- */
  --mint:        #C9E4DE;   /* primary calm — trust */
  --mint-deep:   #A9D2C9;
  --mint-soft:   #E2F0EC;

  --peach:       #F7D9C4;   /* warm accent — cosy */
  --peach-deep:  #EFC2A4;
  --peach-soft:  #FCEBDD;

  --butter:      #FAEDCB;   /* sun / highlight */
  --butter-deep: #F4DDA0;
  --butter-soft: #FDF6E3;

  --lavender:    #DBCDF0;   /* cool accent — fancy */
  --lavender-deep:#C2AFE3;
  --lavender-soft:#ECE3F7;

  /* ---------- NEUTRALS (warm, never bluish-cold) ---------- */
  --paper:       #FBF7EE;   /* page background — warm ivory */
  --paper-warm:  #EDE3D1;   /* alt section background — deeper cream */
  --cream:       #E4D8BF;   /* card background */
  --sand:        #CFC2A6;   /* subtle borders */
  --stone:       #A89B83;   /* muted divider */

  --ink:         #181715;   /* primary text — near black, warm */
  --ink-soft:    #34302E;   /* secondary text */
  --ink-mute:    #6A6259;   /* tertiary / captions */
  --ink-faint:   #948A7C;   /* placeholder / disabled */

  /* ---------- SEMANTIC ---------- */
  --bg:           var(--paper);
  --bg-alt:       var(--paper-warm);
  --surface:      #FFFFFF;
  --surface-tint: var(--cream);
  --border:       var(--sand);
  --border-strong:var(--stone);

  --fg:           var(--ink);
  --fg-soft:      var(--ink-soft);
  --fg-mute:      var(--ink-mute);
  --fg-faint:     var(--ink-faint);

  --primary:      #0F8C5F;   /* vibrant emerald, brighter than forest */
  --primary-hover:#0B7349;
  --primary-soft: #DCFCE7;
  --primary-fg:   #FBF7EE;

  --accent:       #E68A19;   /* vibrant amber-saffron */
  --accent-hover: #C97308;
  --accent-soft:  #FEF3C7;

  /* Vibrant secondary pops — used sparingly on bold panels */
  --pop-coral:    #E04E66;
  --pop-coral-soft: #FEE2E2;
  --pop-plum:     #8B5CF6;
  --pop-plum-soft: #EDE9FE;
  --pop-cobalt:   #3B82F6;
  --pop-cobalt-soft: #DBEAFE;

  --success:      #8FB996;
  --warning:      #E4B86A;
  --danger:       #C77B7B;
  --info:         #95B0CE;

  /* ---------- TYPE FAMILIES ---------- */
  --font-script:        "Pinyon Script", "Apple Chancery", "Snell Roundhand", cursive;
  --font-display:       "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-serif-italic:  "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-body:          "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-mono:          ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE (1.250 — Major Third, gentle) ---------- */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  /* ---------- LINE HEIGHTS / TRACKING ---------- */
  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.5;
  --lh-relaxed:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;   /* eyebrow caps */

  /* ---------- SPACING (4px base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---------- RADII ---------- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* ---------- SHADOWS (soft, warm, never harsh) ---------- */
  --shadow-xs: 0 1px 2px rgba(60, 45, 35, 0.04);
  --shadow-sm: 0 2px 6px rgba(60, 45, 35, 0.05), 0 1px 2px rgba(60, 45, 35, 0.04);
  --shadow-md: 0 6px 18px rgba(60, 45, 35, 0.06), 0 2px 4px rgba(60, 45, 35, 0.04);
  --shadow-lg: 0 16px 40px rgba(60, 45, 35, 0.08), 0 4px 10px rgba(60, 45, 35, 0.04);
  --shadow-xl: 0 28px 70px rgba(60, 45, 35, 0.10), 0 8px 18px rgba(60, 45, 35, 0.05);
  --shadow-glow-mint:    0 0 0 6px rgba(201, 228, 222, 0.55);
  --shadow-glow-peach:   0 0 0 6px rgba(247, 217, 196, 0.55);

  /* ---------- MOTION ---------- */
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.45, 0.05, 0.45, 0.95);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
  --dur-slower: 700ms;
}

/* =========================================================================
   BASE
   ========================================================================= */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================================================================
   SEMANTIC TYPE TOKENS
   "h1 = display serif italic"  |  "script = brand accents"  |  "body = nunito"
   ========================================================================= */

.h-display, h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: normal;
  font-size: clamp(var(--fs-48), 6.5vw, var(--fs-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}

.h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(var(--fs-36), 4.5vw, var(--fs-60));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}

.h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(var(--fs-24), 2.6vw, var(--fs-36));
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}

.h3, h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}

.script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(var(--fs-48), 6.5vw, var(--fs-96));
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--primary);
}

.script-sm {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--fs-36);
  line-height: 0.95;
  color: var(--primary);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-mute);
}

.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg-soft);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-soft);
  margin: 0;
}

.body-sm, small {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-mute);
}

.caption {
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-mute);
}

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out-soft);
}
a:hover { color: var(--primary-hover); }