/* =============================================================================
 * Design tokens.
 *
 * Values extracted from the reference site (shila.co.id) with Firecrawl's
 * branding extractor: palette, font pairing, type scale, spacing unit, radius.
 * Change them here and the whole site follows.
 * ========================================================================== */

:root {
  /* --- Core palette (from reference) --- */
  --c-darkest: #17261d;   /* near-black deep green: headings, footer */
  --c-primary: #3a4a3f;   /* primary brand green */
  --c-accent: #f1ede2;    /* cream: buttons, alternating bands */
  --c-surface: #ffffff;
  --c-ink: #17261d;

  /* --- Derived supporting tones --- */
  --c-muted: #6b7a70;         /* secondary text */
  --c-line: #e3e0d6;          /* hairlines on light bands */
  --c-line-invert: #33413a;   /* hairlines on dark bands */
  --c-surface-alt: #f7f6f1;   /* very light section band */
  --c-on-dark: #f1ede2;
  --c-on-dark-muted: #b9c2b9;

  /* --- Typography (from reference) --- */
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Poppins", system-ui, sans-serif;
  --font-paragraph: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* --- Type scale (from reference) --- */
  --fs-h1: clamp(2rem, 1.2rem + 3.2vw, 3.5rem);   /* 32 -> 56px */
  --fs-h2: clamp(1.5rem, 1rem + 2vw, 2.375rem);   /* 24 -> 38px */
  --fs-h3: clamp(1.15rem, 1rem + 0.6vw, 1.375rem);
  --fs-body: 1rem;      /* 16px */
  --fs-small: 0.8125rem;
  --fs-overline: 0.6875rem;
  --fs-display: clamp(2.25rem, 1rem + 5vw, 4.5rem);

  /* --- Rhythm (from reference) --- */
  --unit: 4px;
  --space-1: calc(var(--unit) * 2);   /* 8 */
  --space-2: calc(var(--unit) * 3);   /* 12 */
  --space-3: calc(var(--unit) * 4);   /* 16 */
  --space-4: calc(var(--unit) * 6);   /* 24 */
  --space-5: calc(var(--unit) * 8);   /* 32 */
  --space-6: calc(var(--unit) * 12);  /* 48 */
  --space-7: calc(var(--unit) * 18);  /* 72 */
  --space-8: calc(var(--unit) * 26);  /* 104 */

  --radius: 5px;      /* reference uses a small 5px radius */
  --radius-pill: 999px;
  --maxw: 1240px;
  --header-h: 72px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 420ms;
}

/* Reference design system is flat: no button shadows, 0px button radius. */
:root {
  --btn-radius: 0px;
  --btn-shadow: none;
}