/*
 * 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;
    /* Background of .vo-btn--primary: --vo-terracotta alone is 3.57:1 on cream,
       below the 4.5:1 normal-text threshold at the button's 14.5px label size. */
    --vo-terracotta-deep: #A4541A;
    --vo-terracotta-deep-hover: #8A4512;
    --vo-gold: #E0A567;
    --vo-plum: #8E4E68;
    --vo-slate: #46606B;
    --vo-success: #1F8A5B;
    --vo-muted: #6F6354;
    --vo-muted-light: #9A8B77;
    --vo-error: #BF3D2E;
    --vo-hairline: rgba(33, 28, 23, .12);
    /* A date the visitor cannot have: past, or already taken. From the client
       calendar of the mockups (docs/design, screens 1a/2b). */
    --vo-unavailable: #CDC2B0;

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

    /* 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);
}

/* Month-navigation chevron (partials/_chevron.html.twig), shared by the public
   and backoffice calendars. Colour and weight come from the button around it. */
.vo-chevron {
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
}

/* Accessibility: available to screen readers, never painted. Used where a state
   is carried by colour or position alone (the availability calendar's days). */
.vo-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* 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;
    }
}