/* ============================================================
   Elisabeth Schwab — Style variations (Tweaks)
   theme-modern · theme-funky · theme-circular
   Each retunes tokens + adds light decorative treatment.
   Default (no class) = the original quiet-luxury direction.
   ============================================================ */

/* smooth recolour when switching directions live */
body { transition: background-color .5s ease, color .5s ease; }

/* =====================================================
   1 · MODERN  — crisp, monochrome, near-black sections,
   one electric accent, grotesk display, sharp corners
   ===================================================== */
body.theme-modern {
  --cream:      #F3F3EF;
  --sand:       #EBEBF0;
  --sand-deep:  #E2E2EA;
  --ink:        #131312;
  --ink-soft:   #46463F;
  --ink-faint:  #8A8A80;
  --pine:       #6031E8;   /* blue-purple accent */
  --pine-deep:  #4820C8;
  --pine-soft:  #A585F4;
  --dark-bg:    #1E0F56;   /* deep indigo for contact section */
  --line:       rgba(19,19,18,0.16);
  --line-soft:  rgba(19,19,18,0.07);
  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
}
body.theme-modern h1,
body.theme-modern h2,
body.theme-modern h3 { letter-spacing: -0.025em; font-weight: 400; }
body.theme-modern .field input,
body.theme-modern .field textarea,
body.theme-modern .field select { border-radius: 12px; }
body.theme-modern .field textarea { border-radius: 16px; }
body.theme-modern .aud-card { border-radius: 20px; }
body.theme-modern .ph { border-radius: 20px; }
body.theme-modern .service .s-tags span {
  border-radius: 100px;
  background: color-mix(in srgb, var(--pine) 10%, transparent);
  border: none;
  color: var(--pine-deep);
}
body.theme-modern .lang-toggle,
body.theme-modern .lang-toggle button { border-radius: 0; }
body.theme-modern .eyebrow { letter-spacing: 0.26em; }
/* hairline grid accents */
body.theme-modern .position-points .row { border-top-color: var(--line); }
body.theme-modern .contact-form .btn-primary { background: var(--pine); color: #fff; }
body.theme-modern .contact-form .btn-primary:hover { background: var(--pine-deep); }
/* hero blob accent */
body.theme-modern .hero { overflow: hidden; }
body.theme-modern .hero::before {
  content: "";
  position: absolute;
  right: -18%; top: -40%;
  width: 75vw;
  max-width: 960px;
  aspect-ratio: 1;
  background: radial-gradient(circle at center,
    rgba(109, 43, 239, 0.16) 0%,
    rgba(120, 80, 230, 0.09) 32%,
    rgba(140, 110, 220, 0.04) 56%,
    transparent 72%
  );
  border-radius: 50%;
  filter: blur(32px);
  pointer-events: none; z-index: 0;
}
body.theme-modern .hero .wrap { position: relative; z-index: 1; }
/* approach rings in modern — use accent tint */
body.theme-modern .bg-approach::before,
body.theme-modern .bg-approach::after {
  border-color: rgba(96, 49, 232, 0.13);
}

/* =====================================================
   2 · FUNKY — warm peach base, bold coral accent,
   grape-purple sections, expressive display, round shapes
   ===================================================== */
body.theme-funky {
  --cream:      #FBF1E6;
  --sand:       #FBE2CD;
  --sand-deep:  #F7D4BA;
  --ink:        #241910;
  --ink-soft:   #6A5240;
  --ink-faint:  #A98C73;
  --pine:       #E0552B;   /* bold coral */
  --pine-deep:  #C13F1C;
  --pine-soft:  #F4A98C;
  --dark-bg:    #3A1E5C;   /* deep grape sections */
  --line:       rgba(36,25,16,0.16);
  --line-soft:  rgba(36,25,16,0.08);
  --serif: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  --sans:  "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
}
body.theme-funky h1,
body.theme-funky h2,
body.theme-funky h3 { font-weight: 700; letter-spacing: -0.02em; }
body.theme-funky .btn { border-radius: 100px; }
body.theme-funky .aud-card { border-radius: 24px; }
body.theme-funky .ph { border-radius: 20px; }
body.theme-funky .field input,
body.theme-funky .field textarea,
body.theme-funky .field select { border-radius: 12px; }
body.theme-funky .service .s-tags span {
  background: var(--pine);
  color: #fff;
  font-weight: 600;
}
body.theme-funky .contact-form .btn-primary { background: var(--pine); color: #fff; }
body.theme-funky .contact-form .btn-primary:hover { background: var(--pine-deep); }
body.theme-funky .service:hover { padding-left: 18px; }
/* playful colour blobs */
body.theme-funky .hero { overflow: hidden; }
body.theme-funky .hero::before {
  content: "";
  position: absolute;
  left: -6%; top: 4%;
  width: 40vw; max-width: 540px; aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgba(224,85,43,0.16), transparent 68%);
  border-radius: 50%;
  pointer-events: none; z-index: 0;
}
body.theme-funky .hero .wrap { position: relative; z-index: 1; }
body.theme-funky #audiences { overflow: hidden; }
body.theme-funky #audiences::before {
  content: "";
  position: absolute;
  right: -8%; bottom: -16%;
  width: 36vw; max-width: 480px; aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgba(58,30,92,0.12), transparent 68%);
  border-radius: 50%;
  pointer-events: none; z-index: 0;
}
body.theme-funky #audiences .wrap { position: relative; z-index: 1; }

/* =====================================================
   3 · CIRCULAR ECONOMY — recycled-kraft base, forest +
   terracotta, circular badges & rings, fully rounded
   ===================================================== */
body.theme-circular {
  --cream:      #ECE5D3;
  --sand:       #E1D8C0;
  --sand-deep:  #D6CBAF;
  --ink:        #2A2A1E;
  --ink-soft:   #5B5743;
  --ink-faint:  #8C886F;
  --pine:       #3E6B43;   /* leaf green */
  --pine-deep:  #2D5034;
  --pine-soft:  #9DBF8E;
  --dark-bg:    #2C4830;   /* forest sections */
  --terra:      #BB6740;   /* terracotta secondary */
  --line:       rgba(42,42,30,0.18);
  --line-soft:  rgba(42,42,30,0.08);
  --serif: "Spectral", Georgia, serif;
  --sans:  "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
}
/* fully rounded language of a circular system */
body.theme-circular .btn,
body.theme-circular .field input,
body.theme-circular .field textarea,
body.theme-circular .field select { border-radius: 100px; }
body.theme-circular .field textarea { border-radius: 22px; }
body.theme-circular .aud-card { border-radius: 26px; }
body.theme-circular .ph { border-radius: 26px; }
body.theme-circular .ph.square { border-radius: 50%; }
body.theme-circular .service .s-tags span {
  background: transparent;
  border: 1px solid var(--terra);
  color: var(--terra);
}
body.theme-circular .contact-form .btn-primary { background: var(--cream); color: var(--pine-deep); }

/* circular number badges */
body.theme-circular .position-points .num,
body.theme-circular .aud-card .a-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--pine);
  color: var(--pine);
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.92rem;
}
body.theme-circular .service .s-index { color: var(--terra); }
body.theme-circular .approach-quote .mark,
body.theme-circular .testimonial .quote .mark { color: var(--terra); }

/* decorative rings — the loop motif */
body.theme-circular .hero { overflow: hidden; }
body.theme-circular .hero::after {
  content: "";
  position: absolute;
  left: -16%; bottom: -42%;
  width: 46vw; max-width: 620px; aspect-ratio: 1;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  pointer-events: none; z-index: 0;
}
body.theme-circular .hero .wrap { position: relative; z-index: 1; }
body.theme-circular #approach { overflow: hidden; }
body.theme-circular #approach::after {
  content: "";
  position: absolute;
  right: -10%; top: -28%;
  width: 38vw; max-width: 500px; aspect-ratio: 1;
  border: 1.5px solid rgba(247,243,236,0.18);
  border-radius: 50%;
  pointer-events: none; z-index: 0;
}
body.theme-circular #approach .wrap { position: relative; z-index: 1; }