/* Design token Amandasari.
 *
 * Spesifikasi ada di DESIGN.md di akar proyek. Berkas ini wujud kodenya.
 * Warna utama hijau logo #2f5d32. Nilai hover diturunkan dengan rumus yang
 * situs BPDP pakai, yaitu HSV value dikali 0,87.
 *
 * Muat berkas ini SESUDAH tema supaya variabel di blok kedua yang dipakai.
 */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Oxanium:wght@500;600;700&display=swap");

:root {
  /* Merek */
  --ams-brand-green: #2f5d32;
  --ams-brand-orange: #fd8427;
  --ams-brand-red: #af0001;
  --ams-brand-brown: #865228;
  --ams-brand-green-hover: #28502b;
  --ams-brand-orange-hover: #db7223;

  /* Netral */
  --ams-neutral-1000: #0a0a0a;
  --ams-neutral-950: #161616;
  --ams-neutral-900: #222222;
  --ams-neutral-800: #494949;
  --ams-neutral-700: #555555;
  --ams-neutral-600: #777777;
  --ams-neutral-500: #888888;
  --ams-neutral-400: #b0b0b0;
  --ams-neutral-300: #dddddd;
  --ams-neutral-200: #e6e6e6;
  --ams-neutral-100: #f2f2f2;
  --ams-neutral-50: #f8f8f8;
  --ams-neutral-25: #fafafa;
  --ams-neutral-0: #ffffff;

  /* Permukaan dan teks */
  --ams-bg: #ffffff;
  --ams-bg-subtle: #f8f8f8;
  --ams-bg-dark: #161616;
  --ams-border: #e6e6e6;
  --ams-border-strong: #dddddd;
  --ams-text: #222222;
  --ams-text-muted: #888888;
  --ams-text-input: #494949;
  --ams-text-inverse: #ffffff;

  /* Warna utama */
  --ams-primary: #2f5d32;
  --ams-primary-hover: #28502b;
  --ams-primary-text: #ffffff;
  --ams-accent: #fd8427;

  /* Status */
  --ams-success: #009145;
  --ams-danger: #d43f3a;
  --ams-warning: #fd8427;
  --ams-info: #865228;

  /* Kategori */
  --ams-category-berita: #fd8427;
  --ams-category-informasi-publik: #2f5d32;
  --ams-category-pengumuman: #af0001;
  --ams-category-riset: #865228;

  /* Tipografi */
  --ams-font-heading: "Oxanium", Helvetica, Arial, sans-serif;
  --ams-font-sans: "Manrope", Helvetica, Arial, sans-serif;
  --ams-font-size-xs: 11px;
  --ams-font-size-sm: 12px;
  --ams-font-size-base: 14px;
  --ams-font-size-md: 16px;
  --ams-font-size-lg: 18px;
  --ams-font-size-xl: 22px;
  --ams-font-size-2xl: 32px;
  --ams-font-size-3xl: 60px;
  --ams-font-weight-regular: 400;
  --ams-font-weight-medium: 500;
  --ams-font-weight-semibold: 600;
  --ams-font-weight-bold: 700;
  --ams-line-height-base: 24px;
  --ams-line-height-tight: 18px;

  /* Jarak */
  --ams-space-1: 5px;
  --ams-space-2: 10px;
  --ams-space-3: 15px;
  --ams-space-4: 20px;
  --ams-space-5: 30px;

  /* Radius */
  --ams-radius-sm: 2px;
  --ams-radius-md: 3px;
  --ams-radius-lg: 4px;
  --ams-radius-pill: 100px;

  /* Bayangan */
  --ams-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
  --ams-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.08);
  --ams-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.04), 0 12px 28px rgba(0, 0, 0, 0.10);

  /* Gerak */
  --ams-duration: 0.2s;
  --ams-ease: ease-in-out;

  /* Tata letak */
  --ams-container-max: 1170px;
  --ams-sidebar-width: 250px;
  --ams-control-height: 42px;
  --ams-control-height-sm: 40px;
  --ams-control-padding: 10px 20px;
}

/* Tema lama membaca token lewat nama variabelnya sendiri. Blok ini yang
 * menyambungkan keduanya, supaya berkas tema tidak perlu ditulis ulang.
 * --primary-light dan --secondary-light tidak punya padanan di DESIGN.md, jadi
 * nilainya disamakan dengan lighten(warna, 30%) seperti tema.
 */
:root {
  --primary: var(--ams-primary);
  --primary-light: #6fb674;
  --secondary: var(--ams-accent);
  --secondary-light: #fedabf;
  --success: var(--ams-success);
  --warning: var(--ams-warning);
  --danger: var(--ams-danger);
  --info: var(--ams-info);
  --gray: var(--ams-neutral-600);
  --black: var(--ams-neutral-900);
  --dark: var(--ams-neutral-900);
  --bs-font-sans-serif: var(--ams-font-sans);
}

body,
.btn,
.form-control,
.nav-link,
.dropdown-menu,
.modal,
.tooltip,
.popover,
.select2-container,
.label,
.badge {
  font-family: var(--ams-font-sans);
}

body {
  font-family: var(--ams-font-sans) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.box-title,
.modal-title,
.content-header h1,
.card-header h3,
.sidebar-menu li.header {
  font-family: var(--ams-font-heading);
  font-weight: var(--ams-font-weight-bold);
}