/*
 * Design tokens extracted from the Claude design mockups (docs/design/).
 * Semantic colors: séjour = terracotta, événement = plum, entreprise = slate.
 */

:root {
    /* Palette */
    --vo-ink: #211C17;
    --vo-cream: #FAF6EE;
    --vo-cream-alt: #F4EEE1;
    --vo-cream-deep: #EDE5D5;
    --vo-terracotta: #C8681E;
    --vo-terracotta-hover: #A4541A;
    --vo-gold: #E0A567;
    --vo-plum: #8E4E68;
    --vo-slate: #46606B;
    --vo-success: #1F8A5B;
    --vo-muted: #6F6354;
    --vo-muted-light: #9A8B77;

    /* Semantic aliases */
    --vo-color-sejour: var(--vo-terracotta);
    --vo-color-evenement: var(--vo-plum);
    --vo-color-entreprise: var(--vo-slate);

    /* Typography */
    --vo-font-serif: 'Playfair Display', Georgia, serif;
    --vo-font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

    /* Layout */
    --vo-container: 1180px;
    --vo-gutter: clamp(20px, 4vw, 52px);
    --vo-radius-sm: 12px;
    --vo-radius-md: 20px;
    --vo-radius-lg: 28px;
    --vo-shadow-card: 0 30px 60px -28px rgba(0, 0, 0, .6);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--vo-cream);
    color: var(--vo-ink);
    font-family: var(--vo-font-sans);
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

h1,
h2,
h3 {
    font-family: var(--vo-font-serif);
    font-weight: 600;
}

::selection {
    background: var(--vo-gold);
    color: var(--vo-ink);
}

/* Accessibility: keyboard skip link, visible only on focus. */
.vo-skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 200;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--vo-ink);
    color: var(--vo-cream);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: top .2s ease;
}

.vo-skip-link:focus {
    top: 12px;
}

/* Global visible focus ring for keyboard users. */
:focus-visible {
    outline: 2px solid var(--vo-terracotta);
    outline-offset: 3px;
}

/* Respect reduced-motion: kill smooth scroll, animations and transitions. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}