/* ==========================================================================
   keliatanajadulu — Design Tokens
   v1.2 LOCKED (2026-05-01) — Tropis 70s
   Reference: Bali design 70s-80s, batik geometric Yogya, sampul majalah
   Femina edisi lawas. Soul: confident, sophisticated, tropical-modernist.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* --------------------------------------------------------------------
     COLOR — primary palette (LOCKED, do not extend without brand review)
     -------------------------------------------------------------------- */

  /* Backgrounds — warmer cream/bone, kertas majalah lawas */
  --kj-cream:        #EFE9D9;  /* page bg, hero, large surfaces */
  --kj-bone:         #E2DAC2;  /* card bg, alternating sections */

  /* Brand — Forest Dalam (sedikit lebih hijau dari v1, menyatu dgn avocado) */
  --kj-forest:       #1F2818;  /* logo, primary buttons, header */
  --kj-forest-90:    #2A3520;  /* hover */

  /* Text */
  --kj-charcoal:     #1A1A14;  /* body, headlines (warm-charcoal) */
  --kj-warm-gray:    #6B6657;  /* body alt, captions, meta */
  --kj-warm-gray-2:  #9A9382;  /* placeholder, disabled */

  /* Accent — Tropis 70s family */
  --kj-ochre:        #E6A532;  /* CTA primary — 1-2 moments per page */
  --kj-ochre-dark:   #C58A1F;  /* CTA hover */
  --kj-avocado:      #788C3A;  /* success state · structural alt · divider em */
  --kj-clay:         #B85B3D;  /* scarcity / rare pop / em */

  /* Legacy aliases — kept so existing components keep working through eras */
  --kj-daisy:        var(--kj-ochre);
  --kj-daisy-darker: var(--kj-ochre-dark);
  --kj-sage:         var(--kj-avocado);
  --kj-lime:         var(--kj-ochre);
  --kj-lime-darker:  var(--kj-ochre-dark);
  --kj-mint:         var(--kj-avocado);
  --kj-terracotta:   var(--kj-clay);

  /* Borders / dividers */
  --kj-border:       #D6CDB4;  /* warm sand, card border + hairlines */
  --kj-border-soft:  #DED5BC;

  /* --------------------------------------------------------------------
     SEMANTIC color aliases — use these in components
     -------------------------------------------------------------------- */
  --bg:              var(--kj-cream);
  --bg-alt:          var(--kj-bone);
  --fg1:             var(--kj-charcoal);   /* primary text */
  --fg2:             var(--kj-warm-gray);  /* secondary */
  --fg3:             var(--kj-warm-gray-2); /* tertiary */
  --fg-on-dark:      var(--kj-cream);
  --brand:           var(--kj-forest);
  --accent:          var(--kj-ochre);
  --success:         var(--kj-avocado);
  --danger:          var(--kj-clay);
  --border:          var(--kj-border);
  --border-soft:     var(--kj-border-soft);

  /* --------------------------------------------------------------------
     TYPE — Plus Jakarta Sans (Indonesian foundry, Tokotype)
     -------------------------------------------------------------------- */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-extrabold: 800;

  /* Type scale — desktop (mobile scales in @media below) */
  --fs-hero:    72px;   /* H0 — landing hero only */
  --fs-h1:      56px;
  --fs-h2:      40px;
  --fs-h3:      28px;
  --fs-h4:      20px;
  --fs-body-l:  20px;
  --fs-body:    16px;
  --fs-body-s:  14px;
  --fs-caption: 12px;
  --fs-button:  16px;

  /* Line heights */
  --lh-tight:   1.05;   /* hero */
  --lh-snug:    1.15;   /* h1/h2 */
  --lh-normal:  1.3;    /* h3/h4 */
  --lh-body:    1.6;    /* body */
  --lh-relaxed: 1.5;    /* body-l, captions */

  /* Letter spacing */
  --ls-tight:   -0.02em; /* hero, h1 */
  --ls-snug:    -0.01em; /* h2, h3 */
  --ls-normal:  0;
  --ls-wide:    0.01em;  /* caption, eyebrow */

  /* --------------------------------------------------------------------
     SPACING — 8-point grid
     -------------------------------------------------------------------- */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  48px;
  --sp-6:  64px;
  --sp-7:  96px;
  --sp-8:  128px;

  /* Container widths */
  --w-content:    1200px;
  --w-full:       1440px;
  --w-text:       720px;

  /* --------------------------------------------------------------------
     RADII
     -------------------------------------------------------------------- */
  --r-xs:  4px;   /* input */
  --r-sm:  8px;   /* small card, button */
  --r-md:  12px;  /* card */
  --r-lg:  16px;  /* hero card */
  --r-pill: 999px;

  /* --------------------------------------------------------------------
     SHADOW — minimal, brand prefers borders + tonal contrast over shadow
     -------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(15, 31, 27, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 31, 27, 0.06);
  --shadow-lg: 0 12px 32px rgba(15, 31, 27, 0.08);
  --shadow-cta: 0 4px 16px rgba(230, 165, 50, 0.40); /* ochre glow on CTA hover */

  /* --------------------------------------------------------------------
     MOTION — fast, no bounce. Pragmatic.
     -------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      320ms;
}

/* ==========================================================================
   SEMANTIC type styles — apply directly via class
   ========================================================================== */

.kj-hero {
  font-family: var(--font-sans);
  font-size: var(--fs-hero);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg1);
}

.kj-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg1);
}

.kj-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg1);
}

.kj-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-snug);
  color: var(--fg1);
}

.kj-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--fg1);
}

.kj-body-l {
  font-family: var(--font-sans);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg1);
}

.kj-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--fg1);
}

.kj-body-s {
  font-family: var(--font-sans);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}

.kj-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: var(--ls-wide);
  color: var(--fg2);
  text-transform: uppercase;
}

.kj-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--fg2);
  text-transform: uppercase;
}

.kj-mono {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   Mobile type adjustments (<768px)
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --fs-hero: 48px;
    --fs-h1:   36px;
    --fs-h2:   28px;
    --fs-h3:   22px;
    --fs-h4:   18px;
  }
}

/* ==========================================================================
   Base reset (optional — apply via .kj-root)
   ========================================================================== */

.kj-root {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.kj-root * { box-sizing: border-box; }

/* ==========================================================================
   Logo wordmark — apply to a span/h1 to render the locked wordmark
   ========================================================================== */
.kj-wordmark {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--brand);
  text-transform: lowercase;
  display: inline-block;
}
.kj-wordmark--on-dark { color: var(--kj-cream); }