/*
 * Sistem tipografi bersama
 * -------------------------
 * Dipakai oleh seluruh portal interaktif agar hierarki informasi terasa
 * konsisten: judul, subjudul, isi, label, catatan, kartu, tabel, dan tombol.
 * Font kode/token sengaja tetap monospace agar mudah dibedakan dari teks biasa.
 */

@font-face {
    font-family: "AppManrope";
    src: url("../font/manrope/Manrope-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
}

:root {
    --app-font-sans: "AppManrope", "MyAPSShell", "FontModern", "Manrope", "Segoe UI", Arial, sans-serif;
    --app-font-display: "AppManrope", "MyAPSDisplay", "MyAPSShell", "Manrope", "Segoe UI", Arial, sans-serif;
    --app-font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --app-type-overline: 0.72rem;
    --app-type-note: 0.8125rem;
    --app-type-meta: 0.875rem;
    --app-type-body: 0.9375rem;
    --app-type-body-lg: 1rem;
    --app-type-subtitle: 1.0625rem;
    --app-type-heading-sm: 1.125rem;
    --app-type-heading: 1.375rem;
    --app-type-heading-lg: clamp(1.55rem, 1.2rem + 1.15vw, 2.05rem);
    --app-type-display: clamp(2rem, 1.45rem + 2.15vw, 2.85rem);

    --app-line-tight: 1.18;
    --app-line-heading: 1.24;
    --app-line-body: 1.6;
    --app-text-strong: #17354a;
    --app-text-body: #35546a;
    --app-text-muted: #6a8395;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea {
    font-family: var(--app-font-sans);
    font-optical-sizing: auto;
}

body {
    font-weight: 450;
    line-height: var(--app-line-body);
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis: none;
}

/* Heading memakai bobot tegas, rapat, dan mudah dipindai. */
body :is(h1, h2, h3, h4, h5, h6, .page-title, .page-heading, .section-title, .dashboard-title) {
    font-family: var(--app-font-display);
    color: inherit;
    text-wrap: balance;
}

body h1,
body .page-title,
body .page-heading {
    font-size: var(--app-type-display);
    font-weight: 800;
    line-height: var(--app-line-tight);
    letter-spacing: -0.042em;
}

body h2,
body .section-title,
body .dashboard-title {
    font-size: var(--app-type-heading-lg);
    font-weight: 780;
    line-height: var(--app-line-heading);
    letter-spacing: -0.032em;
}

body h3,
body .card-title,
body .modal-title,
body .offcanvas-title,
body .swal2-title {
    font-family: var(--app-font-display);
    font-size: var(--app-type-heading);
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: -0.022em;
}

body h4,
body h5,
body h6 {
    font-size: var(--app-type-heading-sm);
    font-weight: 720;
    line-height: 1.34;
    letter-spacing: -0.014em;
}

body :is(p, li, td, th, input, select, textarea) {
    font-size: var(--app-type-body);
}

body :is(.page-subtitle, .section-subtitle, .card-subtitle, .lead) {
    font-size: var(--app-type-subtitle);
    font-weight: 520;
    line-height: 1.55;
}

body :is(.card, .modal-content, .offcanvas, .swal2-popup, .toast, .dataTables_wrapper) {
    font-size: var(--app-type-body);
}

/* Keterangan dalam kartu tidak boleh jatuh terlalu kecil pada shell yang padat. */
body :is(.card, .stat-card, .metric-card, .summary-card, .info-card, .step) :is(p, .card-text, small, .small) {
    font-size: var(--app-type-note);
    line-height: 1.5;
}

body .step :is(b, strong) {
    font-size: var(--app-type-meta);
    line-height: 1.32;
}

/* Label dan keterangan selalu memiliki kontras ukuran yang jelas. */
body :is(label, .form-label, legend, .control-label) {
    font-size: var(--app-type-meta);
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: -0.008em;
}

body :is(.form-text, .form-hint, .form-note, .help-text, .note, .text-muted, .table-caption, caption) {
    color: var(--app-text-muted);
    font-size: var(--app-type-note);
    font-weight: 520;
    line-height: 1.52;
}

body :is(small, .small) {
    font-size: var(--app-type-note);
    font-weight: 520;
    line-height: 1.52;
}

body :is(.eyebrow, .kicker, .overline, .section-kicker, .page-kicker) {
    font-size: var(--app-type-overline);
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.35;
    text-transform: uppercase;
}

body :is(button, .btn, .nav-link, .dropdown-item, .pagination .page-link) {
    font-family: var(--app-font-sans);
    font-size: var(--app-type-meta);
    font-weight: 700;
    line-height: 1.25;
}

body :is(input, select, textarea, .form-control, .form-select) {
    color: var(--app-text-strong);
    font-size: var(--app-type-body);
    font-weight: 520;
    line-height: 1.45;
}

body :is(input, textarea)::placeholder {
    color: #8aa0af;
    font-weight: 450;
    opacity: 1;
}

/* Tabel: header lebih tegas dari isi tanpa terasa kecil. */
body .table > :not(caption) > * > * {
    font-size: var(--app-type-meta);
    line-height: 1.45;
}

body .table > thead > tr > :is(th, td) {
    font-size: var(--app-type-note);
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

body :is(.badge, .chip, .tag) {
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.01em;
}

body :is(code, kbd, pre, samp, .font-monospace, .token-value, .access-token, .recovery-otp, .recovery-token) {
    font-family: var(--app-font-mono);
    font-variant-numeric: tabular-nums;
}

body :is(.numeric, .currency, .amount, .stat-value, .metric-value, .table-number) {
    font-variant-numeric: tabular-nums;
}

/* Portal OSIS memakai stylesheet publik sendiri; samakan jenis hurufnya juga. */
body.osis-public-body,
body.osis-auth-body {
    font-family: var(--app-font-sans);
}

body.osis-public-body :is(h1, h2, h3, h4, h5, h6, .hero-copy h1, .public-page-hero h1, .article-head h1, .article-content, .story-body h3),
body.osis-auth-body :is(h1, h2, h3, h4, h5, h6, .osis-auth-copy h1) {
    font-family: var(--app-font-display);
}

/* Jalur masuk publik tetap satu keluarga dengan dashboard utama. */
body:is(.intro-page, .student-gateway-page, .gateway-page) {
    font-family: var(--app-font-sans);
}

body:is(.intro-page, .student-gateway-page, .gateway-page) :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--app-font-display);
}

body.public-site {
    font-family: var(--app-font-sans);
}

body.public-site :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--app-font-display);
}

@media (max-width: 767.98px) {
    :root {
        --app-type-body: 0.9375rem;
        --app-type-subtitle: 1rem;
        --app-type-heading: 1.25rem;
    }

    body :is(.page-subtitle, .section-subtitle, .card-subtitle, .lead) {
        line-height: 1.5;
    }
}