/* =========================================
   ISYARATKU - THEME
   Token warna dan gaya dasar bersama.
   Dimuat sebelum CSS tiap halaman.
   ========================================= */

:root {
    /* Palet editorial (dari ui-version3): tinta, kertas,
       dan satu warna sinyal biru. */
    --color-primary: #3979B9;
    --color-primary-strong: #285F96;
    --color-navy: #243D55;
    --color-bg: #F4F8FB;
    --color-mint: #E7F0F7;
    --color-accent: #D2E3EF;
    --color-surface: #FFFFFF;

    /* Turunan netral. Muted digelapkan dari #61778A agar
       kontras teks kecil di atas kertas memenuhi WCAG AA. */
    --color-muted: #4D6275;
    --color-placeholder: #5A6F82;
    --color-border: #D3DFE8;
    --color-border-strong: #839CAF;
    --color-surface-muted: #E9F0F6;
    --color-on-dark-muted: #B9CCDC;
    --color-camera: #1B2F42;

    /* Warna semantik */
    --color-success: #1E7A4C;
    --color-success-bg: #E3F4EA;
    --color-warning: #7A5300;
    --color-warning-bg: #FDF1D2;
    --color-danger: #B42318;
    --color-danger-bg: #FDECEA;
    --color-danger-border: #F2C1BB;
    --color-pending: #B7860B;
    --color-focus: var(--color-primary);

    /* Bentuk */
    --shadow-card:
        0 1px 2px rgba(36, 61, 85, 0.05),
        0 8px 20px rgba(36, 61, 85, 0.05);
    --font-sans:
        "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
    /* Huruf A–Z besar dan judul editorial */
    --font-serif: Georgia, "Times New Roman", serif;
    /* Label kecil bergaya indeks */
    --font-mono: "Courier New", Courier, monospace;
}

::selection {
    background: var(--color-mint);
    color: var(--color-navy);
}

/* Fokus keyboard yang jelas di semua halaman */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

/* Di footer gelap, cincin fokus memakai aksen kuning */
:where(.home-footer, .learn-footer, .detail-footer, .practice-footer) :focus-visible {
    outline-color: var(--color-accent);
}