/* ==========================================================================
   KatakanPeta — Design Tokens
   Konsep: "Contour Line" — garis kontur topografi sebagai motif signature,
   menyatukan elevation chart, divider, dan progress indicator dalam satu bahasa visual.
   ========================================================================== */

:root {
  /* ---- Color: Forest Premium Palette ---- */
  --forest-950: #14210F;   /* near-black forest — dark bg */
  --forest-800: #1E3317;   /* dark surface elevated */
  --forest-700: #2D4A1E;   /* primary — deep forest green */
  --forest-600: #3A5C28;   /* primary hover */
  --moss-500:   #6B8E4E;   /* accent — moss green, interactive */
  --moss-300:   #9CB97F;   /* accent light — success/active state */
  --earth-500:  #9C7A4F;   /* warm accent — earth brown, badges/highlights */
  --earth-300:  #C4A87C;   /* earth light */
  --stone-600:  #6B6B5F;   /* secondary text (light mode) */
  --stone-400:  #8B8B7F;   /* muted text / icons */
  --stone-200:  #D8D6CC;   /* borders (light mode) */
  --mist-50:    #F6F4EE;   /* background — warm white */
  --mist-0:     #FFFFFF;   /* surface / cards (light mode) */

  /* ---- Semantic (Light Mode default) ---- */
  --color-bg:            var(--mist-50);
  --color-surface:       var(--mist-0);
  --color-surface-alt:   #EEEBE2;
  --color-primary:       var(--forest-700);
  --color-primary-hover: var(--forest-600);
  --color-accent:        var(--moss-500);
  --color-warm:          var(--earth-500);
  --color-text:          #1C2318;
  --color-text-muted:    var(--stone-600);
  --color-border:        var(--stone-200);
  --color-success:       var(--moss-500);
  --color-danger:        #B5453B;
  --color-sos:           #C0392B;

  /* ---- Typography ---- */
  --font-display: 'Fraunces', 'Georgia', serif;      /* karakter — dipakai hemat, angka besar & judul hero */
  --font-body:    'Public Sans', -apple-system, 'Segoe UI', sans-serif; /* keterbacaan tinggi di bawah sinar matahari */
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', monospace;       /* data — koordinat, elevasi, jarak, waktu */

  --fs-display-xl: clamp(2.25rem, 6vw, 3rem);
  --fs-display-l:  clamp(1.75rem, 5vw, 2.25rem);
  --fs-title:      1.25rem;
  --fs-body:       0.9375rem;
  --fs-caption:    0.8125rem;
  --fs-mono-data:  0.9375rem;

  /* ---- Spacing (8px base) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* ---- Radius & Shadow ---- */
  --radius-card: 20px;
  --radius-btn:  14px;
  --radius-pill: 999px;
  --shadow-soft: 0 2px 12px rgba(20, 33, 15, 0.08);
  --shadow-lift: 0 8px 24px rgba(20, 33, 15, 0.14);
  --glass-bg:    rgba(255, 255, 255, 0.6);
  --glass-blur:  blur(16px);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-med:  280ms;

  /* ---- Layout ---- */
  --nav-height: 68px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --max-width: 480px;
}

/* ---- Dark Mode ---- */
[data-theme="dark"] {
  --color-bg:            var(--forest-950);
  --color-surface:       var(--forest-800);
  --color-surface-alt:   #24391B;
  --color-primary:       var(--moss-300);
  --color-primary-hover: var(--moss-500);
  --color-accent:        var(--moss-300);
  --color-text:          #EDEBE2;
  --color-text-muted:    #A9AE9C;
  --color-border:        #33482A;
  --glass-bg:            rgba(30, 51, 23, 0.6);
  --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.25);
  --shadow-lift: 0 8px 28px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}