/* ============================================================
 * R&K Kelas Jepang — Theme Tokens
 * Palette: "Vibrant Sakura × Royal Indigo"
 * Goal: bersemangat, hangat, alive — tetap Japanese identity
 *       tanpa magenta gaudy, tapi juga TIDAK pucat.
 * Loaded as the LAST stylesheet so its custom-property values
 * override any earlier :root declarations.
 * ============================================================ */

:root {
  /* ===== Backgrounds ===== */
  --bg-primary:      #fff9f0;   /* warm peach cream — punch of life */
  --bg-secondary:    #fde9d8;   /* peach tint for sections */
  --bg-card:         #ffffff;   /* clean card */
  --bg-soft:         #fdf3e5;   /* alternating rows, slight warmth */

  /* ===== Brand: Royal Indigo (deeper, richer than dusty muted) ===== */
  --primary:         #5b3a8a;   /* royal indigo — saturated but not neon */
  --primary-hover:   #4a2d7e;
  --primary-light:   #efe5f7;
  --primary-dark:    #36205c;

  /* ===== Accent: Warm Sakura (alive, bukan magenta menor, bukan gray dusty) ===== */
  --secondary:       #e57ba0;   /* warm rose — vibrant tapi feminine */
  --secondary-hover: #d05f88;
  --secondary-light: #fde0eb;
  --secondary-dark:  #b0466f;

  /* ===== Highlight: Rich Warm Gold (energetic, not lime) ===== */
  --accent:          #f0b840;   /* sun gold — bright tapi warm */
  --accent-hover:    #d99e2b;
  --accent-light:    #fef4d2;

  /* ===== Text ===== */
  --text:            #1f1730;   /* deep indigo-black — sharp contrast */
  --text-secondary:  #564873;
  --text-muted:      #8a7d9e;

  /* ===== Borders & Shadows (slightly stronger now) ===== */
  --border:          #ead8c3;   /* warm border */
  --border-soft:     #f4e6d2;
  --shadow-sm:       0 2px 10px rgba(91, 58, 138, 0.08);
  --shadow:          0 6px 22px rgba(91, 58, 138, 0.12);
  --shadow-lg:       0 12px 32px rgba(91, 58, 138, 0.16);

  /* ===== Semantic (vivid but not screaming) ===== */
  --success:         #5db074;   /* fresh sage */
  --warning:         #e89a4a;   /* warm orange */
  --error:           #d65555;   /* clear coral red */
  --overlay:         rgba(31, 23, 48, 0.62);

  /* ===== Legacy aliases ===== */
  --sakura:          var(--secondary);
  --sakura-light:    var(--secondary-light);
  --sakura-dim:      var(--secondary-hover);
  --indigo:          var(--primary);
  --indigo-light:    var(--primary-light);
  --gold:            var(--accent);
  --gold-light:      var(--accent-light);
  --mint:            var(--success);
  --sky:             #4f8fc9;   /* clearer sky blue */
}

/* ============================================================
 * Selective enhancements for vibrancy
 * ============================================================ */

/* Header: rich purple → rose gradient — alive but balanced */
.header,
.topbar,
.login-box.headerlike {
  background: linear-gradient(135deg, #5b3a8a 0%, #c95e8a 100%) !important;
}

/* Auth pages: warm peach background — not pale */
body.auth-bg,
body.register-bg {
  background: linear-gradient(135deg, #fde9d8 0%, #fff9f0 100%) !important;
}

/* Petal animation — visible but not distracting */
.petal {
  opacity: 0.55 !important;
  animation-duration: 16s !important;
}
@media (prefers-reduced-motion: reduce) {
  .petal { display: none !important; }
}

/* Primary CTA buttons — punchy shadow */
.qn-btn.active,
.nav-btn.active,
.btn-primary,
.cta-primary,
.start-btn {
  box-shadow: 0 8px 22px rgba(229, 123, 160, 0.32) !important;
}

/* Body warm cream */
body { background: var(--bg-primary); }

/* Visited link tone — only for in-content text links, NOT button-styled anchors.
   Scoping to common text-link contexts only, since a global `a:visited` rule
   was overriding `color: #fff` on CTA buttons that user had visited. */
.article-body a:visited,
.toc a:visited,
p > a:visited { color: var(--secondary-dark); }

/* Focus ring — vivid sakura */
:focus-visible {
  outline: 2.5px solid var(--secondary) !important;
  outline-offset: 2px !important;
}

/* Donate floating button — energetic orange */
#rk-donate .donate-btn {
  background: linear-gradient(135deg, #ffa547 0%, #ff7e00 100%) !important;
  box-shadow: 0 10px 26px rgba(255, 126, 0, 0.42) !important;
  border-color: rgba(255,255,255,0.28) !important;
}

/* Hero section heading — richer color.
   NOTE: `.hero h1` site-wide would override pages where .hero has a purple bg
   (e.g., lowongan-kerja-jepang.html). Scope only to landing-style hero. */
.intro-hero h1,
.section-title { color: var(--primary) !important; }

/* Progress bars: vivid gradient */
.mod-progress .bar-fill,
#rkProgBar {
  background: linear-gradient(90deg, var(--accent), var(--secondary)) !important;
}

/* Section accent borders */
.start-here-card,
.ts-form-wrap,
#sec-testimonials {
  border-color: var(--secondary-light) !important;
}

/* CTA anchor buttons — force white text across all link states */
.jf-cta-btn, .jf-cta-btn:visited, .jf-cta-btn:hover, .jf-cta-btn:active,
.bf-cta-btn, .bf-cta-btn:visited, .bf-cta-btn:hover, .bf-cta-btn:active,
.seo-cta-btn, .seo-cta-btn:visited, .seo-cta-btn:hover, .seo-cta-btn:active,
.cta-btn, .cta-btn:visited, .cta-btn:hover, .cta-btn:active,
.cta-primary, .cta-primary:visited, .cta-primary:hover, .cta-primary:active {
  color: #fff !important;
}