/* ==========================================================================
   Onosites - design token (§5)
   Setiap warna, jarak, radius, dan bayangan di seluruh situs berasal dari sini.
   Tidak ada nilai visual utama yang ditulis langsung di komponen.
   ========================================================================== */

:root {
    color-scheme: light;

    /* --- Warna merek: Onosites Concept 1 --------------------------------- */
    /* Empat warna ini adalah sumber palet. Semua token semantik di bawahnya
       adalah warna-warna ini atau turunannya, sehingga mengubah merek berarti
       mengubah empat baris, bukan seluruh berkas. */
    --brand-cocoa: #4b2e20;
    --brand-caramel: #d19a59;
    --brand-beige: #f2d9b3;
    --brand-cream: #fff7ec;

    /* --- Warna ---------------------------------------------------------- */
    --color-bg: var(--brand-cream);
    --color-surface: #ffffff;
    /* Antara krem dan beige: dipakai sebagai latar hover dan permukaan lembut.
       Beige penuh terlalu pekat untuk sekadar keadaan hover. */
    --color-surface-alt: #f7e9d1;
    --color-surface-soft: var(--brand-beige);

    --color-text: var(--brand-cocoa);
    --color-text-muted: #765846;

    --color-border: #e6cba5;
    --color-border-strong: #d9b98c;

    --color-primary: var(--brand-cocoa);
    --color-primary-hover: #382117;
    --color-primary-contrast: var(--brand-cream);
    --color-accent: var(--brand-caramel);
    --color-accent-hover: #bd8345;

    --color-success: #357a52;
    --color-warning: #a26c18;
    --color-danger: #a83d3d;

    /* Latar lembut untuk flash message; alpha rendah agar teksnya tetap kontras. */
    --color-success-soft: #357a521a;
    --color-warning-soft: #a26c181a;
    --color-danger-soft: #a83d3d1a;
    --color-info-soft: #d19a591f;

    /* Cincin fokus dipisah dari primary supaya tetap terlihat di atas tombol
       primary itu sendiri (§43: visible focus). Karamel murni hanya 2,3:1 di
       atas krem — terlalu samar untuk indikator fokus — jadi dipakai karamel
       yang digelapkan: 5,5:1, tetap satu keluarga warna. */
    --color-focus: #8a5a2b;

    /* --- Ukuran --------------------------------------------------------- */
    --container-width: 1200px;
    --content-width: 760px;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 999px;

    /* Bayangan bernada cocoa, bukan hitam netral: abu-abu dingin di atas krem
       terlihat kotor. */
    --shadow-sm: 0 1px 4px rgb(75 46 32 / 0.08);
    --shadow-md: 0 8px 30px rgb(75 46 32 / 0.10);
    --shadow-lg: 0 24px 60px rgb(75 46 32 / 0.16);

    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 3rem;
    --space-xl: 6rem;
    --space-2xl: 9rem;

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;

    /* --- Tipografi ------------------------------------------------------ */
    /* Tanpa webfont: font-src dibatasi 'self' oleh CSP, dan menghindari unduhan
       font menghapus flash teks tak berformat sekaligus satu ronde jaringan. */
    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    --tracking-tight: -0.02em;
    --tracking-wide: 0.08em;

    --header-height: 68px;
}

[data-theme="dark"] {
    color-scheme: dark;

    /* Gelap tetap hangat: cokelat kehitaman, bukan abu-abu netral. */
    --color-bg: #1a120e;
    --color-surface: #251811;
    --color-surface-alt: #302017;
    --color-surface-soft: #3a2719;

    --color-text: var(--brand-cream);
    --color-text-muted: #d7bfa1;

    --color-border: #4c3327;
    --color-border-strong: #6a4a38;

    /* Primary versi terang: cocoa #4b2e20 nyaris tidak terbaca di atas #1a120e,
       jadi peran primary dibalik ke beige. */
    --color-primary: var(--brand-beige);
    --color-primary-hover: #fff0d6;
    --color-primary-contrast: #2a1a12;
    --color-accent: var(--brand-caramel);
    --color-accent-hover: #e0ae72;

    --color-success: #6fb98a;
    --color-warning: #d3a45c;
    --color-danger: #e08b8b;

    --color-success-soft: #6fb98a1f;
    --color-warning-soft: #d3a45c1f;
    --color-danger-soft: #e08b8b1f;
    --color-info-soft: #d19a591f;

    --color-focus: var(--brand-caramel);

    --shadow-sm: 0 1px 4px rgb(0 0 0 / 0.5);
    --shadow-md: 0 8px 30px rgb(0 0 0 / 0.55);
    --shadow-lg: 0 24px 60px rgb(0 0 0 / 0.6);
}