/* ==========================================================================
   Aira design tokens
   Sumber resmi: AIRA Brand Guidelines (PT. Aira Cakra Sarana), hal. 07 & 09-10.
   Nilai "official" disalin dari guideline. Nilai "derived" adalah turunan
   untuk kebutuhan kontras/state dan didokumentasikan di BRAND_MAPPING.md.
   ========================================================================== */

/* Font aktif: Manrope (font template Weebix) — atas permintaan pemilik proyek.
   Poppins & Montserrat (font resmi brand guideline) tetap dideklarasikan agar bisa
   diaktifkan kembali cukup dengan mengganti --font-primary / --font-secondary.
   @font-face yang tidak dipakai tidak diunduh browser. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-variable-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/poppins-300-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/montserrat-variable-latin.woff2") format("woff2");
}

:root {
  /* ---- Official palette (Brand Guidelines hal. 07) ---- */
  --aira-black: #000000;
  --aira-white: #FFFFFF;
  --aira-navy: #1C2D5A;
  --aira-gray: #A9B0B8;
  --aira-blue: #005DAD;
  --aira-light: #DDE3E9;

  /* ---- Derived (bukan warna resmi; untuk kontras & state) ---- */
  --aira-text: #4D5560;          /* body text: turunan abu-abu, kontras ≥ 5.9:1 di #DDE3E9 */
  --aira-blue-tint: rgba(0, 93, 173, 0.12);
  --aira-overlay: rgba(28, 45, 90, 0.86); /* navy resmi + alpha untuk backdrop modal */
  --state-error: #B42318;        /* fungsional, bukan identitas brand */
  --state-success: #1F6F43;      /* fungsional, bukan identitas brand */

  /* ---- Warna permukaan mengikuti Weebix (permintaan pemilik proyek) ---- */
  --weebix-surface: #F7F8FD;     /* = --secondary-color Weebix: latar section & card abu-abu */
  --weebix-divider: #E1E4EB;     /* = --divider-color Weebix */

  /* ---- Semantic roles ---- */
  --color-bg: var(--aira-white);
  --color-surface: var(--aira-white);
  --color-surface-alt: var(--weebix-surface);
  --color-surface-dark: var(--aira-navy);
  --color-heading: var(--aira-black);
  --color-text: var(--aira-text);
  --color-text-on-dark: var(--aira-white);
  --color-muted-on-dark: var(--aira-light);
  --color-accent: var(--aira-blue);
  --color-accent-strong: var(--aira-navy);
  --color-on-accent: var(--aira-white);
  --color-divider: var(--weebix-divider);
  --color-divider-strong: var(--weebix-divider);
  --color-focus: var(--aira-blue);
  --color-cursor: var(--aira-blue);

  /* ---- Typography ----
     Aktif: Manrope (mengikuti Weebix, permintaan pemilik proyek).
     Resmi brand guideline (hal. 09-10): Poppins (primer) & Montserrat (sekunder):
     --font-primary: "Poppins", ...; --font-secondary: "Montserrat", ...; */
  --font-primary: "Manrope", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-secondary: "Manrope", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fw-light: 400;
  --fw-regular: 500;
  --fw-bold: 700;

  --fs-body: 16px;
  --fs-display: 70px;     /* h1/h2 section title (Weebix) */
  --fs-hero-centered: 100px;
  --fs-eyebrow: 20px;
  --fs-card-title: 26px;
  --tracking-display: -0.05em;

  /* ---- Layout ---- */
  --container: 1300px;
  --gutter: 15px;
  --grid-gap: 30px;
  --section-y: 100px;

  /* ---- Shape ---- */
  --radius-xl: 40px;
  --radius-lg: 30px;
  --radius-md: 20px;
  --radius-sm: 15px;
  --radius-xs: 10px;
  --radius-pill: 100px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.3s;
  --dur-med: 0.5s;
  --dur-slow: 1s;

  --header-h: 104px;
  --z-header: 100;
  --z-modal: 1000;
  --z-preloader: 1100;
  --z-cursor: 1200;
}

@media (max-width: 991px) {
  :root {
    --fs-display: 46px;
    --fs-hero-centered: 60px;
    --fs-eyebrow: 18px;
    --section-y: 50px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-display: 30px;
    --fs-hero-centered: 40px;
    --fs-eyebrow: 16px;
  }
}