/* Saadiyat skin - warm cream/gold/charcoal, serif display type, referencing saadiyatisland.ae.
   The default skin (also applied to bare :root before any data-skin attribute is set). */
:root,
:root[data-skin="saadiyat"] {
    --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
    --radius: 8px;
    --radius-sm: 5px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --color-bg: #faf6ee;
    --color-surface: #ffffff;
    --color-surface-alt: #f1e9d8;
    --color-border: #e3d7bd;
    --color-text: #2b2416;
    --color-text-muted: #71624a;
    --color-primary: #b3862f;
    --color-primary-contrast: #241d0f;
    --color-primary-tint: rgba(179, 134, 47, 0.12);
    --color-glow-rgb: 179, 134, 47;
    --color-accent: #8a4a30;
    --color-danger: #b3402c;
    --color-danger-bg: #fbe9e5;
    --color-focus: #8a4a30;

    --shadow-btn: 0 4px 14px rgba(179, 134, 47, 0.28);
    --shadow-btn-hover: 0 8px 20px rgba(179, 134, 47, 0.36);
    --shadow-card: 0 1px 2px rgba(43, 36, 22, 0.04), 0 10px 30px rgba(43, 36, 22, 0.06);
    --shadow-card-hover: 0 1px 2px rgba(43, 36, 22, 0.06), 0 16px 36px rgba(43, 36, 22, 0.1);
}

:root[data-skin="saadiyat"][data-color-mode="dark"] {
    --color-bg: #1a150d;
    --color-surface: #241d12;
    --color-surface-alt: #2c2417;
    --color-border: #3d3220;
    --color-text: #f3ecdc;
    --color-text-muted: #b9ac8f;
    --color-primary: #d3a94f;
    --color-primary-contrast: #201907;
    --color-primary-tint: rgba(211, 169, 79, 0.16);
    --color-glow-rgb: 211, 169, 79;
    --color-accent: #cf8a68;
    --color-danger: #e08469;
    --color-danger-bg: #3a2119;
    --color-focus: #d3a94f;

    --shadow-btn: 0 4px 14px rgba(0, 0, 0, 0.4);
    --shadow-btn-hover: 0 8px 20px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 1px 1px rgba(0, 0, 0, 0.3), 0 10px 26px rgba(0, 0, 0, 0.35);
    --shadow-card-hover: 0 1px 1px rgba(0, 0, 0, 0.3), 0 16px 32px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-color-mode="light"]):not([data-skin]),
    :root[data-skin="saadiyat"]:not([data-color-mode="light"]) {
        --color-bg: #1a150d;
        --color-surface: #241d12;
        --color-surface-alt: #2c2417;
        --color-border: #3d3220;
        --color-text: #f3ecdc;
        --color-text-muted: #b9ac8f;
        --color-primary: #d3a94f;
        --color-primary-contrast: #201907;
        --color-primary-tint: rgba(211, 169, 79, 0.16);
        --color-glow-rgb: 211, 169, 79;
        --color-accent: #cf8a68;
        --color-danger: #e08469;
        --color-danger-bg: #3a2119;
        --color-focus: #d3a94f;
        --shadow-btn: 0 4px 14px rgba(0, 0, 0, 0.4);
        --shadow-btn-hover: 0 8px 20px rgba(0, 0, 0, 0.5);
        --shadow-card: 0 1px 1px rgba(0, 0, 0, 0.3), 0 10px 26px rgba(0, 0, 0, 0.35);
        --shadow-card-hover: 0 1px 1px rgba(0, 0, 0, 0.3), 0 16px 32px rgba(0, 0, 0, 0.45);
    }
}