/*!
 * app.css — gaya sisi publik SPMB SMK Muhammadiyah 2 Cepu
 * Token desain mengikuti docs/UI-UX.md bagian 2.
 * Tanpa kerangka CSS, tanpa build step.
 */

/* ------------------------------------------------------------------ *
 * 1. Font lokal
 * ------------------------------------------------------------------ */

@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/fonts/source-serif-4-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;
}

@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/fonts/source-serif-4-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/* Plus Jakarta Sans adalah variable font: satu berkas melayani 400-600. */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 600;
    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;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url(/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/* ------------------------------------------------------------------ *
 * 2. Token
 * ------------------------------------------------------------------ */

:root {
    --hijau: #0b6b3a;
    --hijau-muda: #e8f1ec;
    --hijau-tua: #085029;
    --ink: #17201b;
    --abu: #5c6660;
    --paper: #f4f2ed;
    --putih: #ffffff;
    --garis: #ded9cf;
    --amber: #b7791f;
    --amber-muda: #fdf5e6;
    --merah: #b42318;
    --merah-muda: #fdf2f1;
    --biru: #175cd3;
    --biru-muda: #eff4fe;

    --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, Arial, sans-serif;

    /*
     * Spasi kelipatan 4px (grid 8pt). Semua padding, margin, dan gap memakai
     * skala ini supaya ritme vertikal konsisten; nilai di luar skala hanya
     * dipakai untuk hal seperti garis 1px atau ikon.
     */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 40px;
    --sp-9: 48px;
    --sp-10: 64px;

    /*
     * Skala tipografi terbatas. Setiap ukuran teks memakai salah satu token
     * ini; nilai acak di luar daftar inilah yang membuat hierarki terasa
     * berantakan meski fontnya bagus.
     */
    --teks-3xs: 10px;
    --teks-2xs: 11px;
    --teks-xs: 12px;
    --teks-sm: 13px;
    --teks-md: 14px;
    --teks-base: 15px;
    --teks-lg: 16px;
    --teks-xl: 18px;
    --teks-2xl: 20px;
    --teks-3xl: 22px;
    --teks-4xl: 24px;
    --teks-5xl: 28px;
    --teks-6xl: 32px;

    --radius-kartu: 12px;
    --radius-tombol: 8px;
    --radius-kecil: 6px;

    /*
     * Bayangan berlapis: satu lapis rapat untuk menempelkan tepi, satu lapis
     * lebar untuk kedalaman. Bayangan tunggal ber-blur besar terbaca "murah".
     */
    --bayang: 0 1px 2px rgba(23, 32, 27, 0.04), 0 2px 8px rgba(23, 32, 27, 0.04);
    --bayang-naik: 0 1px 2px rgba(23, 32, 27, 0.05), 0 8px 24px -4px rgba(23, 32, 27, 0.1);
    --bayang-layang: 0 2px 8px rgba(6, 41, 28, 0.06), 0 24px 56px -12px rgba(6, 41, 28, 0.22);

    /*
     * Gerak: satu durasi dan satu kurva untuk seluruh antarmuka. Perbedaan
     * timing antar komponen adalah salah satu penyebab tampilan terasa
     * "kurang rapi" meski warnanya sudah benar.
     */
    --gerak: 150ms;
    --gerak-lambat: 250ms;
    --kurva: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------------ *
 * 3. Dasar
 * ------------------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--teks-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 var(--sp-3);
    letter-spacing: -0.01em;
}

h1 {
    font-size: var(--teks-5xl);
}

h2 {
    font-size: var(--teks-2xl);
}

h3 {
    font-size: var(--teks-xl);
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: 0;
}

p {
    margin: 0 0 var(--sp-3);
}

a {
    color: var(--hijau);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--gerak) var(--kurva);
}

a:hover {
    color: var(--hijau-tua);
}

small,
.keterangan {
    font-size: var(--teks-sm);
    color: var(--abu);
    line-height: 1.5;
}

/* Fokus harus selalu terlihat jelas, syarat aksesibilitas UI-UX.md bagian 9. */
:focus-visible {
    outline: 2px solid var(--hijau);
    outline-offset: 2px;
    border-radius: 2px;
}

.hanya-pembaca-layar {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.lewati-ke-isi {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 100;
    background: var(--putih);
    color: var(--hijau);
    padding: 10px 16px;
    border-radius: var(--radius-tombol);
    box-shadow: var(--bayang-naik);
}

.lewati-ke-isi:focus {
    left: 16px;
}