/* DCT skin - inspired by visitabudhabi.ae (sophisticated blue/gray/white, hero-first imagery,
   generous whitespace) and dct.gov.ae (formal government tone, native text-size/contrast
   controls - validating that the accessibility toolbar here is exactly the right pattern).
   Deep teal-navy primary evokes the Gulf/heritage palette used across DCT's own destination
   marketing; warm sand/gold accent nods to the desert landscape. No reference imagery was scraped
   from either site (both are live third-party properties) - this is an inspired, original palette
   built from their described visual language, not a pixel copy. */
:root[data-skin="dct"] {
    --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
    --radius: 14px;
    --radius-sm: 8px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    --color-bg: #f7f9fa;
    --color-bg-rgb: 247, 249, 250;
    --color-surface: #ffffff;
    --color-surface-alt: #eef3f4;
    --color-border: #dde5e7;
    --color-text: #0f2b33;
    --color-text-muted: #55707a;
    --color-primary: #0b4a5c;
    --color-primary-contrast: #ffffff;
    --color-primary-tint: rgba(11, 74, 92, 0.10);
    --color-glow-rgb: 11, 74, 92;
    --color-accent: #c08a3e;
    --color-danger: #b5482f;
    --color-danger-bg: #f8e7e1;
    --color-focus: #0b4a5c;

    --shadow-btn: 0 4px 14px rgba(11, 74, 92, 0.22);
    --shadow-btn-hover: 0 8px 20px rgba(11, 74, 92, 0.30);
    --shadow-card: 0 1px 2px rgba(15, 43, 51, 0.05), 0 10px 30px rgba(15, 43, 51, 0.06);
    --shadow-card-hover: 0 1px 2px rgba(15, 43, 51, 0.06), 0 16px 36px rgba(15, 43, 51, 0.10);
}

:root[data-skin="dct"][data-color-mode="dark"] {
    --color-bg: #0a1e24;
    --color-bg-rgb: 10, 30, 36;
    --color-surface: #11292f;
    --color-surface-alt: #0d2329;
    --color-border: #1f3a41;
    --color-text: #eaf3f4;
    --color-text-muted: #91acb2;
    --color-primary: #4fb6c9;
    --color-primary-contrast: #052227;
    --color-primary-tint: rgba(79, 182, 201, 0.16);
    --color-glow-rgb: 79, 182, 201;
    --color-accent: #dcb06a;
    --color-danger: #e0836a;
    --color-danger-bg: #331d19;
    --color-focus: #4fb6c9;

    --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[data-skin="dct"]:not([data-color-mode="light"]) {
        --color-bg: #0a1e24;
        --color-surface: #11292f;
        --color-surface-alt: #0d2329;
        --color-border: #1f3a41;
        --color-text: #eaf3f4;
        --color-text-muted: #91acb2;
        --color-primary: #4fb6c9;
        --color-primary-contrast: #052227;
        --color-primary-tint: rgba(79, 182, 201, 0.16);
        --color-glow-rgb: 79, 182, 201;
        --color-accent: #dcb06a;
        --color-danger: #e0836a;
        --color-danger-bg: #331d19;
        --color-focus: #4fb6c9;
        --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);
    }
}

/* Page background: a soft ambient wash of the primary color rather than a borrowed destination
   photo (no source imagery was supplied) - see MISSING-CONTENT.md if a real hero photo should
   replace this. */
:root[data-skin="dct"] body {
    background-image:
        radial-gradient(circle at 10% -10%, rgba(var(--color-glow-rgb), 0.10) 0%, transparent 45%),
        radial-gradient(circle at 90% 0%, rgba(var(--color-glow-rgb), 0.08) 0%, transparent 45%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}