/**
 * Safari Island — design tokens (light / dark)
 * Maps legacy --resort-* to premium palette for gradual migration.
 */

/**
 * Default: executive dark (matches product UI). Light only when data-theme="light".
 */
:root,
[data-theme="dark"] {
    color-scheme: dark;

    --si-teal-900: #021c1b;
    --si-teal-800: #042f2e;
    --si-teal-700: #115e59;
    --si-teal-600: #2dd4bf;
    --si-teal-400: #5eead4;
    --si-gold-500: #d4a84b;
    --si-gold-400: #e8c97a;
    --si-rose-500: #fb7185;

    --si-bg-base: #0b1220;
    --si-bg-elevated: #111a2e;
    --si-bg-subtle: #152238;
    --si-bg-glass: rgba(17, 26, 46, 0.88);
    --si-border: rgba(148, 163, 184, 0.12);
    --si-border-strong: rgba(148, 163, 184, 0.2);

    --si-text: #f1f5f9;
    --si-text-secondary: #cbd5e1;
    --si-text-muted: #94a3b8;
    --si-text-readable-muted: #b6c4d9;
    --si-text-placeholder: color-mix(in srgb, var(--si-text-muted) 65%, var(--si-text) 35%);
    --si-text-label: #c5d2e6;
    --si-text-heading: var(--si-text);
    --si-text-kpi-value: #f8fafc;
    --si-text-kpi-label: #b6c4d9;
    --si-text-accent: var(--si-teal-400);
    --si-text-success: #6ee7b7;
    --si-text-warning: #fcd34d;
    --si-text-danger: var(--si-rose-500);

    --si-gradient-page: radial-gradient(1000px 500px at 15% -5%, rgba(45, 212, 191, 0.12), transparent 50%),
        radial-gradient(800px 400px at 100% 0%, rgba(212, 168, 75, 0.08), transparent 45%),
        linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
    --si-gradient-brand: linear-gradient(135deg, var(--si-teal-600) 0%, var(--si-teal-800) 100%);
    --si-gradient-card-shine: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 50%);
    --si-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --si-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
    --si-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
    --si-radius-sm: 8px;
    --si-radius-md: 12px;
    --si-radius-lg: 16px;
    --si-radius-xl: 22px;
    --si-radius-pill: 999px;

    /* Motion */
    --si-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --si-duration: 220ms;

    /* Layout */
    --si-sidebar-w: 268px;
    --si-sidebar-w-collapsed: 76px;
    --si-topbar-h: 60px;

    /* Legacy bridge (used across existing pages) */
    --resort-primary: var(--si-teal-600);
    --resort-primary-dark: var(--si-teal-700);
    --resort-secondary: var(--si-gold-500);
    --resort-light: rgba(45, 212, 191, 0.1);
    --resort-sand: var(--si-bg-subtle);
    --body-bg: var(--si-bg-base);
    --body-color: var(--si-text);
    --card-bg: var(--si-bg-elevated);
    --card-border: var(--si-border);
    --input-bg: var(--si-bg-subtle);
    --input-border: var(--si-border-strong);
    --input-color: var(--si-text);
    --table-bg: var(--si-bg-elevated);
    --table-head-bg: var(--si-bg-subtle);
    --table-border: var(--si-border);
    --text-muted: var(--si-text-readable-muted);
    --breakdown-bg: rgba(45, 212, 191, 0.08);
    --breakdown-border: rgba(45, 212, 191, 0.25);
    --booking-summary-bg: rgba(212, 168, 75, 0.1);
    --booking-summary-border: rgba(212, 168, 75, 0.25);
    --footer-bg: transparent;
    --footer-color: var(--si-text-readable-muted);
}

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

    --si-teal-900: #042f2e;
    --si-teal-800: #0a4a48;
    --si-teal-700: #0f766e;
    --si-teal-600: #14b8a6;
    --si-teal-400: #5eead4;
    --si-gold-500: #c9a227;
    --si-gold-400: #e3c76a;
    --si-rose-500: #e11d48;

    --si-bg-base: #f4f7fb;
    --si-bg-elevated: #ffffff;
    --si-bg-subtle: #eef2f7;
    --si-bg-glass: rgba(255, 255, 255, 0.72);
    --si-border: rgba(15, 23, 42, 0.08);
    --si-border-strong: rgba(15, 23, 42, 0.12);

    --si-text: #0f172a;
    --si-text-secondary: #475569;
    --si-text-muted: #64748b;
    --si-text-readable-muted: #5a6678;
    --si-text-placeholder: color-mix(in srgb, var(--si-text-muted) 72%, var(--si-text) 28%);
    --si-text-label: #4a5568;
    --si-text-heading: var(--si-text);
    --si-text-kpi-value: var(--si-text);
    --si-text-kpi-label: #5a6678;
    --si-text-accent: var(--si-teal-700);
    --si-text-success: #0f6d4f;
    --si-text-warning: #92400e;
    --si-text-danger: var(--si-rose-500);

    --si-gradient-page: radial-gradient(1200px 600px at 10% -10%, rgba(20, 184, 166, 0.14), transparent 55%),
        radial-gradient(900px 500px at 100% 0%, rgba(201, 162, 39, 0.12), transparent 50%),
        linear-gradient(180deg, #f4f7fb 0%, #eef6f5 45%, #f4f7fb 100%);
    --si-gradient-brand: linear-gradient(135deg, var(--si-teal-700) 0%, var(--si-teal-900) 100%);
    --si-gradient-card-shine: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 45%);
    --si-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --si-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --si-shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);

    --resort-primary: var(--si-teal-700);
    --resort-primary-dark: var(--si-teal-900);
    --resort-secondary: var(--si-gold-500);
    --resort-light: rgba(20, 184, 166, 0.12);
    --resort-sand: var(--si-bg-subtle);
    --body-bg: var(--si-bg-base);
    --body-color: var(--si-text);
    --card-bg: var(--si-bg-elevated);
    --card-border: var(--si-border);
    --input-bg: #fff;
    --input-border: #cbd5e1;
    --input-color: var(--si-text);
    --table-bg: var(--si-bg-elevated);
    --table-head-bg: var(--si-bg-subtle);
    --table-border: var(--si-border);
    --text-muted: var(--si-text-readable-muted);
    --breakdown-bg: rgba(20, 184, 166, 0.08);
    --breakdown-border: rgba(20, 184, 166, 0.22);
    --booking-summary-bg: rgba(227, 199, 106, 0.12);
    --booking-summary-border: rgba(201, 162, 39, 0.28);
    --footer-bg: transparent;
    --footer-color: var(--si-text-readable-muted);
}

/**
 * Authenticated app shell — executive dark luxury surface.
 * Cascades from body so operational pages stay readable and on-brand
 * even if the user previously saved a light preference.
 */
.app-body.app-body--auth {
    color-scheme: dark;

    --si-bg-base: #050b14;
    --si-bg-elevated: rgba(14, 24, 44, 0.88);
    --si-bg-subtle: rgba(18, 32, 58, 0.92);
    --si-bg-glass: rgba(10, 18, 36, 0.9);
    --si-border: rgba(186, 199, 222, 0.18);
    --si-border-strong: rgba(206, 218, 238, 0.28);

    --si-text: #f6f8fc;
    --si-text-secondary: #e2eaf5;
    --si-text-muted: #a8b9d1;
    --si-text-readable-muted: #c9d6ea;
    --si-text-placeholder: color-mix(in srgb, var(--si-text-muted) 55%, var(--si-text) 45%);
    --si-text-label: #d0dcee;
    --si-text-heading: var(--si-text);
    --si-text-kpi-value: #ffffff;
    --si-text-kpi-label: #c9d6ea;
    --si-text-accent: var(--si-teal-400);
    --si-text-success: #6ee7b7;
    --si-text-warning: #fde68a;
    --si-text-danger: #fda4af;

    --si-gradient-page:
        radial-gradient(900px 520px at 8% -8%, rgba(45, 212, 191, 0.14), transparent 55%),
        radial-gradient(700px 420px at 92% 12%, rgba(129, 140, 248, 0.12), transparent 50%),
        linear-gradient(135deg, #071120 0%, #0d1b34 42%, #102848 100%);

    --si-gradient-brand: linear-gradient(135deg, #2dd4bf 0%, #0f766e 45%, #042f2e 100%);
    --si-gradient-card-shine: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 52%);
    --si-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --si-shadow-md: 0 14px 40px rgba(0, 0, 0, 0.48);
    --si-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.58);

    --resort-primary: #2dd4bf;
    --resort-primary-dark: #115e59;
    --resort-secondary: #d4a84b;
    --resort-light: rgba(45, 212, 191, 0.12);
    --resort-sand: var(--si-bg-subtle);
    --body-bg: var(--si-bg-base);
    --body-color: var(--si-text);
    --card-bg: var(--si-bg-elevated);
    --card-border: var(--si-border);
    --input-bg: rgba(10, 18, 36, 0.65);
    --input-border: var(--si-border-strong);
    --input-color: var(--si-text);
    --table-bg: rgba(10, 18, 36, 0.45);
    --table-head-bg: rgba(16, 28, 52, 0.85);
    --table-border: var(--si-border);
    --text-muted: var(--si-text-readable-muted);
    --breakdown-bg: rgba(45, 212, 191, 0.08);
    --breakdown-border: rgba(45, 212, 191, 0.28);
    --booking-summary-bg: rgba(212, 168, 75, 0.1);
    --booking-summary-border: rgba(212, 168, 75, 0.28);
    --footer-bg: transparent;
    --footer-color: var(--si-text-readable-muted);
}

.app-body.app-body--authenticated {
    color-scheme: dark;

    --si-bg-base: #050b14;
    --si-bg-elevated: rgba(14, 24, 44, 0.88);
    --si-bg-subtle: rgba(18, 32, 58, 0.92);
    --si-bg-glass: rgba(10, 18, 36, 0.9);
    --si-border: rgba(186, 199, 222, 0.18);
    --si-border-strong: rgba(206, 218, 238, 0.28);

    --si-text: #f6f8fc;
    --si-text-secondary: #e2eaf5;
    --si-text-muted: #a8b9d1;
    --si-text-readable-muted: #c9d6ea;
    --si-text-placeholder: color-mix(in srgb, var(--si-text-muted) 55%, var(--si-text) 45%);
    --si-text-label: #d0dcee;
    --si-text-heading: var(--si-text);
    --si-text-kpi-value: #ffffff;
    --si-text-kpi-label: #c9d6ea;
    --si-text-accent: var(--si-teal-400);
    --si-text-success: #6ee7b7;
    --si-text-warning: #fde68a;
    --si-text-danger: #fda4af;

    --si-gradient-page:
        radial-gradient(900px 520px at 8% -8%, rgba(45, 212, 191, 0.14), transparent 55%),
        radial-gradient(700px 420px at 92% 12%, rgba(129, 140, 248, 0.12), transparent 50%),
        linear-gradient(135deg, #071120 0%, #0d1b34 42%, #102848 100%);

    --si-gradient-brand: linear-gradient(135deg, #2dd4bf 0%, #0f766e 45%, #042f2e 100%);
    --si-gradient-card-shine: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 52%);
    --si-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --si-shadow-md: 0 14px 40px rgba(0, 0, 0, 0.48);
    --si-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.58);

    --resort-primary: #2dd4bf;
    --resort-primary-dark: #115e59;
    --resort-secondary: #d4a84b;
    --resort-light: rgba(45, 212, 191, 0.12);
    --resort-sand: var(--si-bg-subtle);
    --body-bg: var(--si-bg-base);
    --body-color: var(--si-text);
    --card-bg: var(--si-bg-elevated);
    --card-border: var(--si-border);
    --input-bg: rgba(10, 18, 36, 0.65);
    --input-border: var(--si-border-strong);
    --input-color: var(--si-text);
    --table-bg: rgba(10, 18, 36, 0.45);
    --table-head-bg: rgba(16, 28, 52, 0.85);
    --table-border: var(--si-border);
    --text-muted: var(--si-text-readable-muted);
    --breakdown-bg: rgba(45, 212, 191, 0.08);
    --breakdown-border: rgba(45, 212, 191, 0.28);
    --booking-summary-bg: rgba(212, 168, 75, 0.1);
    --booking-summary-border: rgba(212, 168, 75, 0.28);
    --footer-bg: transparent;
    --footer-color: var(--si-text-readable-muted);
}

/**
 * Login / auth pages — always executive dark (matches authenticated shell).
 */
.app-body.app-body--auth {
    color-scheme: dark;

    --si-bg-base: #050b14;
    --si-bg-elevated: rgba(14, 24, 44, 0.88);
    --si-bg-subtle: rgba(18, 32, 58, 0.92);
    --si-bg-glass: rgba(10, 18, 36, 0.9);
    --si-border: rgba(186, 199, 222, 0.18);
    --si-border-strong: rgba(206, 218, 238, 0.28);

    --si-text: #f6f8fc;
    --si-text-secondary: #e2eaf5;
    --si-text-muted: #a8b9d1;
    --si-text-readable-muted: #c9d6ea;
    --si-text-placeholder: color-mix(in srgb, var(--si-text-muted) 55%, var(--si-text) 45%);
    --si-text-label: #d0dcee;
    --si-text-heading: var(--si-text);
    --si-text-kpi-value: #ffffff;
    --si-text-kpi-label: #c9d6ea;
    --si-text-accent: var(--si-teal-400);
    --si-text-success: #6ee7b7;
    --si-text-warning: #fde68a;
    --si-text-danger: #fda4af;

    --si-gradient-page:
        radial-gradient(900px 520px at 8% -8%, rgba(45, 212, 191, 0.14), transparent 55%),
        radial-gradient(700px 420px at 92% 12%, rgba(129, 140, 248, 0.12), transparent 50%),
        linear-gradient(135deg, #071120 0%, #0d1b34 42%, #102848 100%);

    --si-gradient-brand: linear-gradient(135deg, #2dd4bf 0%, #0f766e 45%, #042f2e 100%);
    --si-gradient-card-shine: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 52%);
    --si-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --si-shadow-md: 0 14px 40px rgba(0, 0, 0, 0.48);
    --si-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.58);

    --resort-primary: #2dd4bf;
    --resort-primary-dark: #115e59;
    --resort-secondary: #d4a84b;
    --resort-light: rgba(45, 212, 191, 0.12);
    --resort-sand: var(--si-bg-subtle);
    --body-bg: var(--si-bg-base);
    --body-color: var(--si-text);
    --card-bg: var(--si-bg-elevated);
    --card-border: var(--si-border);
    --input-bg: rgba(10, 18, 36, 0.65);
    --input-border: var(--si-border-strong);
    --input-color: var(--si-text);
    --table-bg: rgba(10, 18, 36, 0.45);
    --table-head-bg: rgba(16, 28, 52, 0.85);
    --table-border: var(--si-border);
    --text-muted: var(--si-text-readable-muted);
    --breakdown-bg: rgba(45, 212, 191, 0.08);
    --breakdown-border: rgba(45, 212, 191, 0.28);
    --booking-summary-bg: rgba(212, 168, 75, 0.1);
    --booking-summary-border: rgba(212, 168, 75, 0.28);
    --footer-bg: transparent;
    --footer-color: var(--si-text-readable-muted);
}