/* ==========================================================================
   GregetDev — design tokens
   Editorial Minimalism with a technical edge (per DESIGN.md / Stitch export):
   warm off-white paper, tonal surface layering (no heavy shadows), deep sage
   as the one signature accent, a single dark "contrast" section, thin 1px
   technical rules instead of decoration.
   ========================================================================== */

:root {
  /* --- Background / surface scale (tonal layering, not shadows) ---------- */
  --background: #f5f6f2;
  --surface-low: #f2f4f2;
  --surface: #edeeec;
  --surface-high: #e7e9e6;
  --card: #ffffff;

  /* --- Foreground scale ----------------------------------------------------- */
  --foreground: #191c1b;
  --foreground-secondary: #404946;
  --foreground-muted: #707976;
  --foreground-link: var(--foreground-secondary);

  /* --- Sage — signature accent, used sparingly ---------------------------- */
  --brand-dark: #48786e;
  --primary-hover: #3d6961;
  --sage-light: #e3ece7;
  --mint: #cfe3dc;

  /* --- The one dark "contrast" section (Unusual Problems) ---------------- */
  --charcoal: #202725;
  --on-charcoal: #ffffff;
  --on-charcoal-muted: rgba(255, 255, 255, 0.7);

  /* --- Warm accent — DESIGN.md's tiny status-indicator color; used once,
     never as a background ---------------------------------------------- */
  --accent-warm: #e89173;

  /* --- CTA ----------------------------------------------------------------- */
  --cta: #48786e;
  --cta-hover: #3d6961;
  --cta-text: #ffffff;

  /* --- Borders — technical-drawing rules, not decoration ------------------ */
  --border: #dce3df;
  --border-strong: #bfc9c5;
  --border-subtle: rgba(32, 39, 37, 0.08);
  --border-accent: rgba(72, 120, 110, 0.45);

  /* --- Ambient decoration — kept very low-opacity, never a glow/ring ------ */
  --glow-card: rgba(72, 120, 110, 0.06);

  /* --- Shadows — a single barely-perceptible ambient level, per DESIGN.md - */
  --shadow-card: 0 10px 30px rgba(32, 39, 37, 0.05);
  --shadow-lift: 0 16px 40px rgba(32, 39, 37, 0.08);
  --shadow-cta: 0 8px 24px rgba(44, 73, 66, 0.12);
  --shadow-cta-hover: 0 10px 28px rgba(44, 73, 66, 0.16);

  /* --- Tipografi: triple-font hierarchy (inspiration / info / technical) - */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-text: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Fluid scale — interpolated between a 375px and 1440px reference width so
     each token actually reaches its MIN at mobile and MAX at desktop.
     (A prior version of these coefficients made the mid-term already exceed
     the clamp's own max at mobile widths, so every token was silently
     pinned to its desktop size on phones — e.g. a 64px heading rendering at
     375px wide, overflowing the viewport. Verify any edit to these by
     checking the computed font-size at a 375px viewport, not just by eye.) */
  --t-display: clamp(2.75rem, 2.31rem + 1.88vw, 4rem); /* 44px → 64px */
  --t-final: clamp(2.25rem, 1.28rem + 4.13vw, 5rem); /* 36px → 80px */
  --t-h2: clamp(1.75rem, 1.49rem + 1.13vw, 2.5rem); /* 28px → 40px */
  --t-h3: clamp(1.2rem, 1.1rem + 0.45vw, 1.5rem); /* 19.2px → 24px */
  --t-lead: clamp(1rem, 0.96rem + 0.19vw, 1.125rem); /* 16px → 18px */
  --t-body: clamp(0.9375rem, 0.92rem + 0.09vw, 1rem); /* 15px → 16px */
  --t-small: 0.875rem; /* 14px */
  --t-micro: 0.75rem; /* 12px — label-mono */
  --t-nano: 0.625rem; /* 10px — diagram node labels */

  /* --- Ruang: 8px base unit, editorial margins ------------------------------ */
  --unit: 0.5rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --shell: 1280px;
  --sect-y: clamp(4.5rem, 10vh, 8.5rem);
  --gap: clamp(1rem, 2vw, 1.75rem);

  /* --- Bentuk: soft-technical, 16px cards / 8px inner / pill buttons ------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-btn: 12px;
  --r-pill: 999px;

  /* --- Motion ----------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur: 300ms;
  --dur-slow: 560ms;
}