/* ==========================================================================
   Token desain Warung Ilima
   Sumber kebenaran: DESIGN.md. Jangan menambah warna baru di file lain.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-latin-700-normal.woff2') format('woff2');
}

:root {
  /* Warna - peran, bukan sekadar hex */
  --primary: #15803d;
  --primary-strong: #166534;
  --primary-soft: #dcfce7;
  --accent: #d97706;
  --accent-soft: #fef3c7;
  --canvas: #faf7f0;
  --surface: #ffffff;
  --surface-warm: #f5f1e8;
  --ink: #1c1917;
  --body: #57534e;
  --muted: #a8a29e;
  --hairline: #e7e2d8;
  --danger: #b91c1c;
  --warning: #b45309;
  --info: #1d4ed8;

  /* Tipografi */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-display: 36px;
  --fs-h1: 28px;
  --fs-h2: 20px;
  --fs-body: 16px;
  --fs-label: 14px;
  --fs-caption: 13px;

  /* Spasi (kelipatan 4) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 9999px;

  /* Elevasi */
  --shadow-1: 0 1px 2px rgba(28, 25, 23, 0.06);
  --shadow-2: 0 -2px 8px rgba(28, 25, 23, 0.08);
  --shadow-3: 0 8px 24px rgba(28, 25, 23, 0.12);

  /* Layout */
  --container: 1120px;
  --gutter: 16px;
  --header-h: 60px;
}

@media (min-width: 640px) {
  :root {
    --gutter: 24px;
    --fs-display: 40px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
    --fs-display: 44px;
    --header-h: 68px;
  }
}