/* ==========================================================================
   Art and Soul Studio — Design tokens

   Layout, type scale and section rhythm follow the approved mockup
   Concept A "Golden Hour" (research/concept-a-golden-hour.html).
   The palette is drawn from the studio's watercolor sticker: coral, muted
   teal, sage, golden yellow and warm paper white.

   Token names are semantic (--primary, --surface, --ink) rather than
   colour-literal, so a future palette change is a single-file edit.
   Colours used at partial opacity also expose an -rgb channel triplet,
   consumed as rgb(var(--x-rgb) / <alpha>).
   ========================================================================== */

/* --- Self-hosted fonts (no third-party requests) --- */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('../fonts/playfair-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/playfair-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Primary: dusty teal from the hand-painted rainbow. --- */
  --primary:       #2F9997;
  --primary-hover: #247D7B;
  --primary-lt:    #79C5C0;
  --primary-dk:    #216D6B;
  --primary-rgb:   47 153 151;

  /* --- Accent: warm coral from the sticker's stars and lettering. --- */
  --accent:        #E9786B;
  --accent-lt:     #F3AAA5;
  --accent-dk:     #B94E45;
  --accent-rgb:    233 120 107;

  /* --- Supporting watercolor hues. --- */
  --highlight:     #E8B653;
  --sage:          #A8B579;
  --peach:         #F29A68;

  /* --- Surfaces: clean white with warm watercolor tints. --- */
  --surface:       #FFFFFF;
  --surface-dk:    #F5EDE7;
  --white:         #FFFFFF;

  /* --- Ink: soft charcoal, like the sticker lettering. --- */
  --ink:           #292B29;
  --ink-md:        #575B57;
  --ink-rgb:       41 43 41;

  --paper:         #FFF9F5;
  --paper-rgb:     255 249 245;

  /* --- Section gradients --- */
  --grad-hero:  #FFFFFF;
  --grad-head:  #FFFFFF;
  --grad-about: #FFFFFF;

  /* --- Type --- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-xs:   0.78rem;
  --fs-sm:   0.88rem;
  --fs-base: 1rem;
  --fs-md:   1.05rem;
  --fs-lg:   1.2rem;
  --fs-h3:   1.4rem;
  --fs-h2:   clamp(2rem, 3.5vw, 3rem);
  --fs-h1:   clamp(2.4rem, 5vw, 4.4rem);

  /* --- Spacing --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* --- Layout --- */
  --gutter: clamp(20px, 5vw, 80px);
  --maxw: 1280px;
  --nav-h: 132px;

  /* --- Radii --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 50px;

  /* --- Shadows --- */
  --sh-sm: 0 4px 20px rgb(var(--ink-rgb) / 0.12);
  --sh-md: 0 12px 40px rgb(var(--ink-rgb) / 0.15);
  --sh-lg: 0 20px 56px rgb(var(--ink-rgb) / 0.18);
  --sh-primary: 0 6px 24px rgb(var(--primary-rgb) / 0.40);
  --sh-accent:  0 6px 24px rgb(var(--accent-rgb) / 0.40);

  /* --- Motion --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.22s;
}

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