/**
 * Lukisan Emas brand guideline — colors, typography, buttons.
 * Primary #FFD400 · Complementary #FFBD00 · Tertiary #FF9900 · Black #000000
 */

:root {
  --le-brand-primary: #ffd400;
  --le-brand-complementary: #ffbd00;
  --le-brand-tertiary: #ff9900;
  --le-brand-black: #000000;

  --gold: var(--le-brand-primary);
  --gold-complementary: var(--le-brand-complementary);
  --gold-tertiary: var(--le-brand-tertiary);
  --gold-soft: #ffe566;

  --le-font-brand: 'Belanosima', 'Plus Jakarta Sans', sans-serif;
  --le-font-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --le-h1-size: 42px;
  --le-h2-size: 24px;
  --le-body-size: 16px;

  --le-gradient-gold: linear-gradient(180deg, var(--le-brand-primary) 0%, var(--le-brand-tertiary) 100%);
  --le-gradient-gold-diagonal: linear-gradient(135deg, var(--le-brand-primary) 0%, var(--le-brand-complementary) 45%, var(--le-brand-tertiary) 100%);
  --le-shadow-gold: none;
}

body {
  font-family: var(--le-font-ui);
  font-size: var(--le-body-size);
  color: #e5e5e5;
}

.le-brand-wordmark,
.brand-wordmark {
  font-family: var(--le-font-brand);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--le-brand-primary);
}

.le-type-h1 {
  font-family: var(--le-font-ui);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.5vw, var(--le-h1-size));
  line-height: 1.12;
  color: var(--le-brand-primary);
}

.product-hero h1 {
  font-family: var(--le-font-ui);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.5vw, var(--le-h1-size));
  line-height: 1.12;
  color: #ffffff;
}

.le-type-h2,
.gc-section-heading,
.section-title {
  font-family: var(--le-font-ui);
  font-weight: 600;
  font-size: clamp(1.125rem, 2.2vw, var(--le-h2-size));
  line-height: 1.3;
  color: #ffffff;
}

.le-type-body {
  font-family: var(--le-font-ui);
  font-weight: 400;
  font-size: var(--le-body-size);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.text-gold,
.hero-title-line--gold,
.product-hero h1 .text-gold {
  color: var(--le-brand-primary);
}

/* Primary action — complementary gold, black label (guideline footer bar) */
.btn-gold,
.btn-gold-nav,
.product-cta,
.marketing-topnav-btn--primary,
.marketing-topnav-btn--trial {
  background: var(--le-brand-complementary) !important;
  color: var(--le-brand-black) !important;
  border: none;
  font-weight: 700;
  box-shadow: var(--le-shadow-gold);
}

.btn-gold:hover,
.btn-gold-nav:hover,
.product-cta:hover,
.marketing-topnav-btn--primary:hover,
.marketing-topnav-btn--trial:hover {
  filter: brightness(1.06);
  color: var(--le-brand-black) !important;
}

.product-cta--ghost,
.marketing-topnav-btn--ghost {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
  box-shadow: none;
}

.product-cta--ghost:hover,
.marketing-topnav-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  filter: none;
}

/* Circular / accent control — primary → tertiary gradient */
.le-btn-gold-gradient {
  background: var(--le-gradient-gold);
  color: var(--le-brand-black);
  border: none;
  border-radius: 999px;
  box-shadow: var(--le-shadow-gold);
}

.le-btn-gold-gradient:hover {
  filter: brightness(1.05);
  color: var(--le-brand-black);
}