:root {
    color-scheme: light;
    --color-brand-ink: #18332f;
    --color-brand-coral: #f1664c;
    --color-brand-mint: #cddfd5;
    --color-canvas: #f7f3e9;
    --color-surface: #fffdf8;
    --color-surface-raised: #ffffff;
    --color-text: var(--color-brand-ink);
    --color-text-muted: #526863;
    --color-accent: var(--color-brand-coral);
    --color-primary-bg: #18332f;
    --color-on-primary: #ffffff;
    --color-on-dark: #ffffff;
    --color-on-light: #101917;
    --color-icon-confirmed: #000000;
    --color-border: #d8e0db;
    --color-focus: var(--color-brand-coral);
    /* International Symbol of Access: the same blue sign with a white figure in every theme. */
    --color-accessibility-sign-bg: #0a4fa3;
    --color-accessibility-sign-fg: #ffffff;
    --color-danger: #9a3434;
    --color-success: #52725d;
    --color-surface-muted: #edf5f1;
    --color-accent-soft: #fff0e9;
    --color-danger-soft: #fff0ec;
    --color-success-soft: #e8f3ec;
    --color-warning: #7c5a22;
    --color-warning-soft: #fff1dc;
    --color-like: #e0245e;
    --color-like-soft: #f2ebf3;
    --color-media-canvas: #101312;
    --color-media-placeholder-start: #f4cbbd;
    --color-media-placeholder-end: #dcece3;
    --color-media-overlay: rgba(255, 255, 255, .94);
    --color-on-media-overlay: #365149;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --radius-sm: .625rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-pill: 999px;
    --elevation-1: 0 8px 24px rgba(24, 51, 47, .08);
    --elevation-2: 0 16px 42px rgba(24, 51, 47, .16);
    --elevation-3: 0 22px 50px rgba(24, 51, 47, .20);
    --z-header: 40;
    --z-menu: 60;
    --z-dialog: 100;
    --motion-fast: 150ms ease-out;
    --motion-standard: 250ms ease-out;
    /* Transitional aliases for existing rules; new rules use semantic roles. */
    --ink: var(--color-text);
    --cream: var(--color-canvas);
    --coral: var(--color-accent);
    --mint: var(--color-brand-mint);
    --white: var(--color-surface);
    /* Community-channel aliases are scoped for the first member slice and map to the shared semantic scale. */
    --line: var(--color-border);
    --line-strong: var(--color-border);
    --surface: var(--color-surface);
    --muted: var(--color-text-muted);
    --danger: var(--color-danger);
    --shadow-sm: var(--elevation-1);
    --shadow-md: var(--elevation-2);
    --mobile-header-height: 72px;
    --select-chevron-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%23111917' d='M0 1h10L5 7z'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --color-brand-ink: #f4f0e7;
        --color-brand-coral: #ff8a72;
        --color-brand-mint: #29483f;
        --color-canvas: #101917;
        --color-surface: #16231f;
        --color-surface-raised: #1d2d28;
        --color-text: #f4f0e7;
        --color-text-muted: #b7c8c1;
        --color-accent: #ff8a72;
        --color-primary-bg: #ff8a72;
        --color-on-primary: #101917;
        --color-border: #42554e;
        --color-focus: #ff9b84;
        --color-danger: #ff9b92;
        --color-success: #a8d1b2;
        --color-surface-muted: #243a33;
        --color-accent-soft: #3b2822;
        --color-danger-soft: #3d2424;
        --color-success-soft: #20382c;
        --color-warning: #f0cf80;
        --color-warning-soft: #3a3020;
        --color-like: #ff7ca5;
        --color-like-soft: #3a2938;
        --color-media-placeholder-start: #604239;
        --color-media-placeholder-end: #29483f;
        --elevation-1: 0 8px 24px rgba(0, 0, 0, .24);
        --elevation-2: 0 16px 42px rgba(0, 0, 0, .34);
        --elevation-3: 0 22px 50px rgba(0, 0, 0, .44);
        --select-chevron-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%23f4f0e7' d='M0 1h10L5 7z'/%3E%3C/svg%3E");
    }
}

/* Explicit photographic skins override the device palette while preserving semantic roles. */
html[data-skin="aegean"] {
    color-scheme: light;
    --color-brand-ink: #42301f;
    --color-brand-coral: #c76a3c;
    --color-brand-mint: #e9dcc3;
    --color-canvas: #f7f0e2;
    --color-surface: #fdf8ee;
    --color-surface-raised: #ffffff;
    --color-text: #42301f;
    --color-text-muted: #7a6650;
    --color-accent: #c76a3c;
    --color-primary-bg: #a9532c;
    --color-on-primary: #ffffff;
    --color-on-dark: #ffffff;
    --color-on-light: #2f2115;
    --color-border: #e3d5bf;
    --color-focus: #b5562e;
    --color-danger: #a13f34;
    --color-success: #5d7148;
    --color-surface-muted: #f2e8d8;
    --color-accent-soft: #faead9;
    --color-danger-soft: #f8e4da;
    --color-success-soft: #ebf0df;
    --color-warning: #8a6116;
    --color-warning-soft: #f9edd2;
    --color-like: #c93f5e;
    --color-like-soft: #f7e4e6;
    --color-media-placeholder-start: #ecd9bd;
    --color-media-placeholder-end: #e6d3b8;
    --skin-hero-image: url("images/skins/aegean-hero.webp");
    --skin-hero-position: center;
    --skin-hero-mobile-position: 68% center;
    --skin-hero-overlay: linear-gradient(90deg, rgba(56, 30, 12, .88) 0%, rgba(56, 30, 12, .64) 36%, rgba(56, 30, 12, .12) 70%, transparent 100%);
    --skin-hero-text: #ffffff;
    --skin-hero-muted: #f2e2c8;
    --select-chevron-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%2342301f' d='M0 1h10L5 7z'/%3E%3C/svg%3E");
}

html[data-skin="sunset"] {
    color-scheme: dark;
    --color-brand-ink: #fff7ef;
    --color-brand-coral: #ed7880;
    --color-brand-mint: #4a342c;
    --color-canvas: #211713;
    --color-surface: #2a1d18;
    --color-surface-raised: #35241e;
    --color-text: #fff7ef;
    --color-text-muted: #d3bfb2;
    --color-accent: #ed7880;
    --color-primary-bg: #a93647;
    --color-on-primary: #ffffff;
    --color-on-dark: #ffffff;
    --color-on-light: #211713;
    --color-border: #6b4d42;
    --color-focus: #ff9a9d;
    --color-danger: #ff9a92;
    --color-success: #b8d5b3;
    --color-surface-muted: #432e27;
    --color-accent-soft: #4b2829;
    --color-danger-soft: #4a2826;
    --color-success-soft: #2e3c2b;
    --color-warning: #f1ce85;
    --color-warning-soft: #463820;
    --color-like: #ff819f;
    --color-like-soft: #4a2935;
    --color-media-placeholder-start: #714637;
    --color-media-placeholder-end: #3d2b26;
    --color-media-overlay: rgba(255, 247, 239, .94);
    --color-on-media-overlay: #35241e;
    --elevation-1: 0 8px 24px rgba(0, 0, 0, .25);
    --elevation-2: 0 16px 42px rgba(0, 0, 0, .35);
    --elevation-3: 0 22px 50px rgba(0, 0, 0, .45);
    --skin-hero-image: url("images/skins/sunset-hero.webp");
    --skin-hero-position: center;
    --skin-hero-mobile-position: 66% center;
    --skin-hero-overlay: linear-gradient(90deg, rgba(23, 13, 9, .92) 0%, rgba(31, 17, 12, .70) 40%, rgba(31, 17, 12, .10) 74%, transparent 100%);
    --skin-hero-text: #fffaf4;
    --skin-hero-muted: #f0d8ca;
    --select-chevron-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%23fff7ef' d='M0 1h10L5 7z'/%3E%3C/svg%3E");
}

html[data-skin="paris"] {
    color-scheme: light;
    --color-brand-ink: #1e3552;
    --color-brand-coral: #3d7dc8;
    --color-brand-mint: #dbe9f7;
    --color-canvas: #eef5fb;
    --color-surface: #f9fcff;
    --color-surface-raised: #ffffff;
    --color-text: #1e3552;
    --color-text-muted: #54708c;
    --color-accent: #3d7dc8;
    --color-primary-bg: #2f6bb8;
    --color-on-primary: #ffffff;
    --color-on-dark: #ffffff;
    --color-on-light: #1a2c42;
    --color-border: #cfe0ef;
    --color-focus: #2f6bb8;
    --color-danger: #b3364e;
    --color-success: #3f6d5a;
    --color-surface-muted: #e3eef9;
    --color-accent-soft: #e3edfb;
    --color-danger-soft: #f7e6ea;
    --color-success-soft: #e4f1ea;
    --color-warning: #775519;
    --color-warning-soft: #faf0dc;
    --color-like: #d6396b;
    --color-like-soft: #f3e7f0;
    --color-media-placeholder-start: #d7e6f6;
    --color-media-placeholder-end: #e6eefa;
    --skin-hero-image: url("images/skins/paris-hero.webp");
    --skin-hero-position: center;
    --skin-hero-mobile-position: 67% center;
    --skin-hero-overlay: linear-gradient(90deg, rgba(238, 245, 251, .97) 0%, rgba(238, 245, 251, .84) 39%, rgba(238, 245, 251, .20) 72%, transparent 100%);
    --skin-hero-text: #1e3552;
    --skin-hero-muted: #4c6a8a;
    --select-chevron-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%231e3552' d='M0 1h10L5 7z'/%3E%3C/svg%3E");
}

/* Sunset is a dark photographic treatment, but it cannot defeat an explicit or device-resolved
   Light choice. Hero imagery and typography remain Sunset-specific; member surfaces become light. */
html[data-skin="sunset"][data-resolved-appearance="light"] {
    color-scheme: light;
    --color-brand-ink: #42301f; --color-brand-coral: #c75f67; --color-brand-mint: #eaded5;
    --color-canvas: #f8f1e9; --color-surface: #fffaf4; --color-surface-raised: #ffffff;
    --color-text: #42301f; --color-text-muted: #756459; --color-accent: #b84653;
    --color-primary-bg: #a93647; --color-on-primary: #ffffff; --color-border: #dfd1c8;
    --color-focus: #a93647; --color-danger: #a13f45; --color-success: #557052;
    --color-surface-muted: #f1e7df; --color-accent-soft: #f8e4e5; --color-danger-soft: #f8e4e1;
    --color-success-soft: #e8f0e5; --color-warning: #805b1c; --color-warning-soft: #faedd4;
    --color-like: #c93f62; --color-like-soft: #f6e5eb;
    --color-media-placeholder-start: #ecd2ca; --color-media-placeholder-end: #e8ddd5;
    --elevation-1: 0 8px 24px rgba(66, 48, 31, .08); --elevation-2: 0 16px 42px rgba(66, 48, 31, .16); --elevation-3: 0 22px 50px rgba(66, 48, 31, .20);
    --select-chevron-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%2342301f' d='M0 1h10L5 7z'/%3E%3C/svg%3E");
}

/* Appearance is independent from photographic skin. These rules follow skin tokens so an
   explicit member choice wins without component-level theme branches. */
html[data-appearance="dark"] {
    color-scheme: dark;
    --color-brand-ink: #f4f0e7; --color-brand-coral: #ff8a72; --color-brand-mint: #29483f;
    --color-canvas: #101917; --color-surface: #16231f; --color-surface-raised: #1d2d28;
    --color-text: #f4f0e7; --color-text-muted: #b7c8c1; --color-accent: #ff8a72;
    --color-primary-bg: #ff8a72; --color-on-primary: #101917; --color-border: #42554e;
    --color-focus: #ff9b84; --color-danger: #ff9b92; --color-success: #a8d1b2;
    --color-surface-muted: #243a33; --color-accent-soft: #3b2822; --color-danger-soft: #3d2424;
    --color-success-soft: #20382c; --color-warning: #f0cf80; --color-warning-soft: #3a3020;
    --color-like: #ff7ca5; --color-like-soft: #3a2938;
    --color-media-placeholder-start: #604239; --color-media-placeholder-end: #29483f;
    --elevation-1: 0 8px 24px rgba(0, 0, 0, .24); --elevation-2: 0 16px 42px rgba(0, 0, 0, .34); --elevation-3: 0 22px 50px rgba(0, 0, 0, .44);
    --select-chevron-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%23f4f0e7' d='M0 1h10L5 7z'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    html[data-appearance="system"] {
        color-scheme: dark;
        --color-brand-ink: #f4f0e7; --color-brand-coral: #ff8a72; --color-brand-mint: #29483f;
        --color-canvas: #101917; --color-surface: #16231f; --color-surface-raised: #1d2d28;
        --color-text: #f4f0e7; --color-text-muted: #b7c8c1; --color-accent: #ff8a72;
        --color-primary-bg: #ff8a72; --color-on-primary: #101917; --color-border: #42554e;
        --color-focus: #ff9b84; --color-danger: #ff9b92; --color-success: #a8d1b2;
        --color-surface-muted: #243a33; --color-accent-soft: #3b2822; --color-danger-soft: #3d2424;
        --color-success-soft: #20382c; --color-warning: #f0cf80; --color-warning-soft: #3a3020;
        --color-like: #ff7ca5; --color-like-soft: #3a2938;
        --color-media-placeholder-start: #604239; --color-media-placeholder-end: #29483f;
        --elevation-1: 0 8px 24px rgba(0, 0, 0, .24); --elevation-2: 0 16px 42px rgba(0, 0, 0, .34); --elevation-3: 0 22px 50px rgba(0, 0, 0, .44);
        --select-chevron-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%23f4f0e7' d='M0 1h10L5 7z'/%3E%3C/svg%3E");
    }
}