/*
 * Azukaru Color Refresh 1.0.1
 * Visual-only layer for SWELL + azukaru-site-pack + azukaru-motion-comic.
 * No layout markup, content, pricing logic, animation timing, or form logic is changed.
 */

:root {
  /* Official 2026 colour system */
  --azk-brand: #ff008a;
  --azk-cta: #d60075;
  --azk-base: #ffffff;
  --azk-soft: #fff0f7;
  --azk-text: #253047;
  --azk-muted: #5f687b;
  --azk-line: #f4bddb;
  --azk-line-soft: #fde0ef;
  --azk-shadow: 0 16px 42px rgba(128, 20, 78, 0.10);
  --azk-shadow-strong: 0 18px 42px rgba(214, 0, 117, 0.20);

  /* SWELL visual settings: equivalent to the requested base-colour update. */
  --color_main: #ff008a;
  --color_main_thin: rgba(255, 0, 138, 0.07);
  --color_main_dark: #d60075;
  --color_text: #253047;
  --color_link: #d60075;
  --color_htag: #ff008a;
  --color_bg: #ffffff;
  --color_header_bg: #ffffff;
  --color_header_text: #253047;
  --color_footer_bg: #253047;
  --color_footer_text: #ffffff;
  --color_list_check: #ff008a;
  --color_list_num: #ff008a;
  --color_faq_q: #d60075;
  --color_faq_a: #253047;
  --color_gradient1: #fff0f7;
  --color_gradient2: #ff7bc1;

  /* Existing custom-site tokens. */
  --ink: #253047;
  --muted: #5f687b;
  --line: #f4bddb;
  --paper: #ffffff;
  --mist: #fff0f7;
  --sky: #ff8ac9;
  --sky-deep: #d60075;
  --pink: #ff4dac;
  --pink-deep: #ff008a;
  --purple: #253047;
  --shadow: var(--azk-shadow);

  /* Motion-comic tokens. Decorative pink stays vivid; text buttons use CTA. */
  --azk-navy: #253047;
  --azk-pink: #ff008a;
  --azk-sakura: #fff0f7;
  --azk-white: #ffffff;
}

html {
  background: var(--azk-base);
}

body {
  color: var(--azk-text);
  background: var(--azk-base);
}

body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body summary:focus-visible {
  outline: 3px solid var(--azk-brand) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px #fff;
}

/* ---------- Header / navigation ---------- */
.site-header,
.l-header,
.l-fixHeader {
  color: var(--azk-text);
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--azk-line-soft);
  box-shadow: 0 6px 22px rgba(128, 20, 78, 0.06);
}

.l-header__bar {
  background: var(--azk-brand);
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible,
.c-gnav > li:hover > a,
.c-gnav > .-current > a {
  color: var(--azk-cta);
}

.c-gnav a::after,
.p-spHeadMenu .menu-item.-current {
  background: var(--azk-brand);
  border-bottom-color: var(--azk-brand);
}

.language-select,
.icon-button {
  color: var(--azk-text);
  background: #fff;
  border-color: var(--azk-line-soft);
}

/* ---------- First view / hero ---------- */
.hero {
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 0, 138, 0.12), transparent 29%),
    radial-gradient(circle at 88% 23%, rgba(255, 128, 197, 0.17), transparent 27%),
    linear-gradient(155deg, #ffffff 0%, #ffffff 49%, #fff0f7 100%);
}

.hero-kicker,
.story-price,
.story-caption,
.v2-card-message,
.v2-bottom-message {
  color: var(--azk-text);
  border-color: var(--azk-line-soft);
}

.hero-kicker {
  box-shadow: 0 8px 22px rgba(214, 0, 117, 0.08);
}

.price-one,
.story-rate b,
.story-price-label,
.eyebrow,
.hero-message-line-2,
.lulu-story-copy-closing,
.lulu-rate-reveal > span,
.lulu-rate-reveal em {
  color: var(--azk-brand);
}

.price-one {
  text-shadow: 0 5px 0 #ffd8ec;
}

/* ---------- Buttons / CTA ---------- */
.button-primary,
.azk-button--primary,
.wp-element-button,
.wp-block-button__link,
.swell-block-button__link {
  color: #fff !important;
  background: var(--azk-cta) !important;
  border-color: var(--azk-cta) !important;
  box-shadow: var(--azk-shadow-strong);
}

.button-primary:hover,
.azk-button--primary:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
.swell-block-button__link:hover {
  color: #fff !important;
  background: #b80065 !important;
}

.button-secondary,
.azk-button--secondary {
  color: var(--azk-cta);
  background: #fff;
  border-color: var(--azk-cta);
}

.button-map {
  color: #fff;
  background: var(--azk-cta);
}

.button-line,
.button-instagram {
  /* Service colours stay identifiable, while shape and shadows match the system. */
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 12px 24px rgba(37, 48, 71, 0.14);
}

/* ---------- White space / section rhythm ---------- */
.section-soft,
.page-hero,
.azk-rate-guide,
.azk-comic__end {
  background: var(--azk-soft);
}

.section-title,
.page-hero h1,
.hero h1,
.content-card h2,
.access-info h2 {
  color: var(--azk-text);
}

.section-intro,
.hero-copy,
.hero-note,
.page-hero p,
.feature-card p,
.experience-card p,
.step p,
.faq-item p {
  color: var(--azk-muted);
}

/* ---------- Cards / pricing / calculator ---------- */
.utility-grid,
.promise-grid > div,
.feature-card,
.experience-card,
.step,
.content-card,
.access-card,
.calculator,
.azk-rate-card,
.azk-zero__prices > div,
.azk-comic__price-grid > div {
  background: #fff;
  border-color: var(--azk-line-soft);
  box-shadow: var(--azk-shadow);
}

.promise-grid > div {
  background: linear-gradient(145deg, #ffffff, #fff7fb);
}

.formula,
.azk-calculator__rule,
.lulu-copy blockquote,
.step-icon,
.search-results a {
  background: var(--azk-soft);
  border-color: var(--azk-line-soft);
}

.formula strong,
.feature-card .num,
.step::before,
.promise-grid span,
.azk-calculator__benefit,
.faq-item summary::after,
.calculator-kicker {
  color: var(--azk-cta);
}

.promise-grid strong,
.card-tag,
.status-chip,
.quick-time button,
.slider-label output,
.calc-value-note {
  color: var(--azk-text);
}

.card-tag,
.status-chip,
.quick-time button {
  background: var(--azk-soft);
  border-color: var(--azk-line);
}

.calculator-v2 {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #ff008a, #ff9ed2) border-box;
  box-shadow: 0 22px 58px rgba(214, 0, 117, 0.13);
}

.azk-segmented button {
  color: var(--azk-text);
  background: #fff7fb;
  border-color: var(--azk-line);
}

.azk-segmented button.is-active,
.quick-time button.is-active {
  color: #fff;
  background: var(--azk-cta);
  border-color: var(--azk-cta);
}

.price-range::-webkit-slider-runnable-track {
  background: linear-gradient(
    90deg,
    var(--azk-cta) 0,
    var(--azk-brand) var(--range-progress),
    #f5dce9 var(--range-progress),
    #f5dce9 100%
  );
}

.price-range::-webkit-slider-thumb {
  background: var(--azk-brand);
  box-shadow: 0 5px 16px rgba(214, 0, 117, 0.27);
}

.calc-result,
.calc-result-v2 {
  color: #fff;
  background:
    radial-gradient(circle at 85% 0, rgba(255, 255, 255, 0.22), transparent 31%),
    linear-gradient(135deg, #d60075 0%, #ff008a 100%);
  box-shadow: 0 18px 38px rgba(214, 0, 117, 0.24);
}

.calc-result-v2::after {
  color: rgba(255, 255, 255, 0.16);
}

.azk-rate-guide__condition,
.faq-list,
.faq-item,
.utility-grid,
.utility-item + .utility-item {
  border-color: var(--azk-line-soft);
}

/* ---------- Motion-comic entry panel ---------- */
.azk-zero__panel {
  border: 1px solid rgba(255, 0, 138, 0.14);
  box-shadow: 0 18px 56px rgba(93, 27, 64, 0.20);
}

.azk-zero__title span,
.azk-zero__prices em,
.azk-comic__end-kicker,
.azk-comic__price-grid em,
.azk-rate-card em {
  color: var(--azk-brand);
}

.azk-button {
  border-color: var(--azk-cta);
}

.azk-comic__progress span {
  background: var(--azk-brand);
}

/* ---------- Character and access presentation ---------- */
.lulu-standing-halo,
.page-hero-lulu span {
  background: radial-gradient(
    circle,
    #fff 0,
    #fff 43%,
    rgba(255, 0, 138, 0.11) 44%,
    rgba(255, 0, 138, 0.11) 58%,
    rgba(255, 151, 207, 0.14) 59%,
    rgba(255, 151, 207, 0.14) 70%,
    transparent 71%
  );
}

.lulu-copy blockquote {
  color: var(--azk-text);
  border-left-color: var(--azk-brand);
}

.map-station-badge span,
.map-pin {
  background: var(--azk-brand);
}

/* ---------- Closing CTA / footer ---------- */
.final-cta {
  color: #fff;
  background: linear-gradient(135deg, #d60075 0%, #b80065 100%);
}

.final-cta .eyebrow,
.final-cta .section-title,
.final-cta .heading-with-lulu-dark,
.final-cta h2 {
  color: #fff;
}

.final-cta-inner p {
  color: rgba(255, 255, 255, 0.88);
}

.final-cta .button-map {
  color: var(--azk-cta);
  background: #fff;
}

.final-cta .button-secondary {
  color: #fff;
  background: rgba(37, 48, 71, 0.18);
  border-color: rgba(255, 255, 255, 0.72);
}

.site-footer {
  color: #fff;
  background: var(--azk-text);
  border-top: 5px solid var(--azk-brand);
}

.footer-copy,
.footer-nav a {
  color: rgba(255, 255, 255, 0.78);
}

.footer-socials a {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.footer-socials a:hover,
.footer-nav a:hover {
  color: #fff;
  background: var(--azk-cta);
}

/* ---------- Mobile ---------- */
.mobile-dock {
  color: var(--azk-text);
  background: rgba(255, 255, 255, 0.98);
  border-top-color: var(--azk-line);
  box-shadow: 0 -8px 24px rgba(128, 20, 78, 0.09);
}

.mobile-dock a {
  color: var(--azk-text);
}

.mobile-dock a:hover,
.mobile-dock a:focus-visible {
  color: var(--azk-cta);
}

@media (max-width: 920px) {
  .section {
    padding-block: 72px;
  }

  .hero {
    background:
      radial-gradient(circle at 50% 10%, rgba(255, 0, 138, 0.11), transparent 29%),
      linear-gradient(180deg, #ffffff 0%, #fff5fa 100%);
  }
}

@media (max-width: 620px) {
  .section {
    padding-block: 58px;
  }

  .hero-copy,
  .section-intro,
  .page-hero p {
    line-height: 1.8;
  }

  .button,
  .azk-button,
  .wp-element-button,
  .wp-block-button__link {
    min-height: 50px;
  }

  .feature-card,
  .experience-card,
  .step,
  .content-card,
  .access-info,
  .calculator-v2 {
    box-shadow: 0 12px 30px rgba(128, 20, 78, 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .azk-button,
  .wp-element-button,
  .wp-block-button__link {
    transition: none !important;
  }
}