/*
 * Design tokens
 * Warna aksen: logo Yayasan Melaju Bersama.
 * Sistem (tipografi, netral, radius, bayangan, ritme): mengikuti gaya trybuzzer.com.
 */

/* Font di-host sendiri (subset Latin, variabel 400–800) — tanpa permintaan pihak ketiga */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fallback dengan metrik disamakan (diukur dari Arial) agar pergantian font tidak menggeser layout */
@font-face {
  font-family: "Plus Jakarta Sans Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 104.23%;
  ascent-override: 99.59%;
  descent-override: 21.3%;
  line-gap-override: 0%;
}

:root {
  /* Brand — dari logo */
  --brand-maroon: #ae1f26;
  --brand-maroon-deep: #8a171a;
  --brand-red: #e82129;
  --brand-orange: #f47622;
  --brand-amber: #f8aa1c;
  --action: #d91e26;          /* merah logo, sedikit digelapkan agar teks putih lolos WCAG AA (5.0:1) */
  --action-hover: var(--brand-maroon);

  /* Tint hangat untuk chip, ikon, dan latar lembut */
  --tint-50: #fff7f2;
  --tint-100: #ffefe6;

  /* Netral — skala abu-abu sistem */
  --gray-950: #0b0a0d;
  --gray-900: #111827;
  --gray-800: #1f2937;
  --gray-700: #374151;
  --gray-600: #4b5563;
  --gray-500: #6b7280;        /* teks sekunder kecil — 4.8:1 di atas putih */
  --gray-450: #878d98;        /* teks redup ukuran besar — ≥3:1 (WCAG teks besar) */
  --gray-400: #9ca3af;        /* hanya dekorasi / teks di atas latar gelap */
  --gray-300: #d1d5db;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;
  --gray-50: #fafafa;
  --white: #ffffff;
  --panel-dark: #231c1d;      /* panel gelap bergaya "chat" */
  --field-border: #8b919c;    /* batas kolom formulir — 3.2:1 (WCAG 1.4.11) */

  /* Latar hero bila WebGL tidak tersedia */
  --hero-shader-fallback:
    radial-gradient(55% 60% at 50% 55%, rgb(232 33 41 / 0.45), transparent 70%),
    radial-gradient(80% 70% at 50% 100%, rgb(138 23 26 / 0.7), transparent 75%),
    #0d0405;

  /* Tipografi */
  --font: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.3125rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 1.35rem + 1.6vw, 2.4rem);   /* judul dua-warna */
  --text-3xl: clamp(2.1rem, 1.4rem + 2.8vw, 3.25rem);    /* H2 */
  --text-hero: clamp(2.6rem, 1.4rem + 4.9vw, 4.5rem);    /* H1 */
  --tracking-tight: -0.025em;

  /* Ruang */
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  --container: 1210px;
  --space-section: clamp(4.5rem, 3rem + 5vw, 8rem);
  --bar-pad: min(1.25rem, calc(var(--gutter) - 4px));    /* padding dalam bar header */

  /* Bentuk */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-btn: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 40px;

  /* Bayangan */
  --shadow-xs: 0 1px 2px rgb(16 24 40 / 0.05);
  --shadow-chip: 0 1px 2px rgb(16 24 40 / 0.04), 0 6px 16px -6px rgb(16 24 40 / 0.08);
  --shadow-widget: 0 1px 2px rgb(16 24 40 / 0.04), 0 18px 40px -18px rgb(16 24 40 / 0.18);
  --shadow-glow: 0 24px 60px -20px rgb(244 118 34 / 0.45);

  /* Fokus */
  --focus-ring: var(--action);
  --focus-ring-on-dark: var(--white);

  /* Gerak */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 650ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --header-h: 72px;
  --tap-min: 44px;
}