/* ================================================================
   fonts.css — Aptos + skala nyaman (+1–2px dari ukuran asli template)
   text-[13px] → 15px, body 16px
   ================================================================ */

@font-face {
  font-family: 'Aptos';
  src:
    url('/assets/fonts/aptos/Aptos.woff2') format('woff2'),
    url('/assets/fonts/aptos/Aptos.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aptos';
  src:
    url('/assets/fonts/aptos/Aptos-Italic.woff2') format('woff2'),
    url('/assets/fonts/aptos/Aptos-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Aptos';
  src:
    url('/assets/fonts/aptos/Aptos-SemiBold.woff2') format('woff2'),
    url('/assets/fonts/aptos/Aptos-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aptos';
  src:
    url('/assets/fonts/aptos/Aptos-Bold.woff2') format('woff2'),
    url('/assets/fonts/aptos/Aptos-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: 'Aptos', 'Segoe UI Variable', 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
  --text-10: 13px;
  --text-11: 13px;
  --text-12: 15px;
  --text-13: 16px;
  --text-14: 17px;
  --text-15: 17px;
  --text-16: 18px;
  --text-17: 19px;
  --text-18: 19px;
  --text-body: 17px;
}

html {
  font-size: 16px;
}

html,
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-size: var(--text-body);
  line-height: 1.5;
}

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

.text-xs {
  font-size: var(--text-12) !important;
  line-height: 1.25rem !important;
}

.text-sm {
  font-size: var(--text-body) !important;
  line-height: 1.5rem !important;
}

.text-base {
  font-size: 18px !important;
  line-height: 1.5rem !important;
}

.text-lg {
  font-size: 19px !important;
  line-height: 1.75rem !important;
}

.text-\[10px\] {
  font-size: var(--text-10) !important;
  line-height: 1.125rem !important;
}

.text-\[11px\] {
  font-size: var(--text-11) !important;
  line-height: 1.125rem !important;
}

.text-\[12px\] {
  font-size: var(--text-12) !important;
  line-height: 1.25rem !important;
}

.text-\[13px\] {
  font-size: var(--text-13) !important;
  line-height: 1.375rem !important;
}

.text-\[14px\] {
  font-size: var(--text-14) !important;
  line-height: 1.5rem !important;
}

.text-\[15px\] {
  font-size: var(--text-15) !important;
  line-height: 1.5rem !important;
}

.text-\[16px\] {
  font-size: var(--text-16) !important;
  line-height: 1.5rem !important;
}

.text-\[17px\] {
  font-size: var(--text-17) !important;
  line-height: 1.625rem !important;
}

.text-\[18px\] {
  font-size: var(--text-18) !important;
  line-height: 1.625rem !important;
}

.text-\[19px\],
.text-\[20px\] {
  font-size: 21px !important;
  line-height: 1.75rem !important;
}

input,
select,
textarea,
button {
  font-family: var(--font-sans);
}

input:not([type='checkbox']):not([type='radio']),
select,
textarea {
  font-size: var(--text-13) !important;
}

table {
  font-size: var(--text-13);
}

table th {
  font-size: var(--text-12);
  line-height: 1.25rem;
}

table td {
  line-height: 1.375rem;
}