/*
 * Vintage Morocco design tokens.
 * This is the only file allowed to declare raw design values.
 */

@font-face {
    font-family: "Gambetta";
    src: url("../fonts/gambetta-600-latin-ext.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Switzer";
    src: url("../fonts/switzer-400-latin-ext.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Switzer";
    src: url("../fonts/switzer-500-latin-ext.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Geist Mono";
    src: url("../fonts/geist-mono-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /*
     * COLOR
     * DISCIPLINE: --saffron must not exceed ~3% of any viewport.
     * Enforced by review, not by code.
     * FORBIDDEN: --saffron text on --tadelakt (1.711:1) fails WCAG AA.
     */
    --indigo-deep: #101426;
    --indigo-raised: #1A2038;
    --tadelakt: #E6E0D4;
    --bone: #F7F3EA;
    --saffron: #D9A441;
    --fes-green: #1F4A3C;

    /* Functional error colors only: never backgrounds or decoration. */
    --madder-deep: #8C3A2B;
    --madder-light: #E08A76;

    /* FONT FAMILIES AND WEIGHTS */
    --font-display: "Gambetta", Georgia, serif;
    --font-body: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    /* SEVEN-STEP FLUID TYPE SCALE */
    --step--1: clamp(0.83rem, 0.81rem + 0.10vw, 0.89rem);
    --step-0: clamp(1rem, 0.95rem + 0.24vw, 1.13rem);
    --step-1: clamp(1.25rem, 1.16rem + 0.44vw, 1.50rem);
    --step-2: clamp(1.56rem, 1.40rem + 0.79vw, 2rem);
    --step-3: clamp(1.95rem, 1.69rem + 1.32vw, 2.66rem);
    --step-4: clamp(2.44rem, 2.02rem + 2.10vw, 3.55rem);
    --step-5: clamp(3.05rem, 2.40rem + 3.25vw, 4.73rem);

    --leading-display: 1.04;
    --leading-body: 1.65;
    --tracking-display: -0.02em;
    --tracking-eyebrow: 0.14em;
    --tracking-wordmark: 0.08em;
    --measure-body: 62ch;
    --measure-hero-copy: 38ch;
    --measure-roadbook-note: 34ch;
    --font-size-input-min: 16px;
    --font-size-hero-sub: 17px;
    --font-size-hero-mobile-max: 34px;

    /* SPACING AND LAYOUT */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;

    --gutter: 20px;
    --container-max: 1320px;
    --section-space: 64px;
    --viewport-block-full: 100dvh;
    --safe-area-bottom: env(safe-area-inset-bottom);

    /* RADII, BORDERS, FOCUS, ELEVATION */
    --radius-none: 0px;
    --radius-control: 2px;
    --border-hairline-width: 1px;
    --border-dark: 1px solid rgba(247, 243, 234, 0.10);
    --border-light: 1px solid rgba(16, 20, 38, 0.10);
    --border-field-focus: 1px solid var(--fes-green);
    --focus-ring: 2px solid var(--saffron);
    --focus-ring-offset: 3px;
    --shadow-dark: none;
    --shadow-light: 0 1px 2px rgba(16, 20, 38, 0.06), 0 8px 24px rgba(16, 20, 38, 0.04);
    --border-success-rule: 2px solid var(--saffron);

    /* EASING, DURATIONS, STAGGERS, MOTION */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 200ms;
    --dur-nav: 300ms;
    --dur-base: 450ms;
    --dur-image: 600ms;
    --dur-slow: 900ms;
    --dur-hero-sequence: 1.4s;
    --dur-reduced-motion: 0.01ms;
    --stagger-menu: 40ms;
    --stagger-roadbook: 90ms;
    --motion-menu-rise: 12px;
    --motion-scroll-reveal: 20px;
    --motion-hero-rise: 24px;
    --image-hover-scale: 1.03;

    /* GENERAL COMPONENT DIMENSIONS */
    --tap-target-min: 44px;
    --tap-target-preferred: 48px;
    --control-height: 52px;
    --faq-row-min-height: 56px;

    /* HEADER AND NAVIGATION */
    --header-height: 56px;
    --header-background-opacity: 92%;
    --header-backdrop-blur: 12px;
    --header-wordmark-max-width: 120px;
    --wordmark-secondary-opacity: 60%;
    --header-solid-scroll-threshold: 100px;
    --menu-button-size: 48px;
    --menu-row-min-height: 56px;
    --menu-row-height: 52px;
    --nav-active-underline-offset: 6px;

    /* FOOTER */
    --footer-link-opacity: 72%;
    --footer-meta-opacity: 55%;

    /* STACKING CONTEXTS — gaps are reserved for later layered components. */
    --z-header: 100;
    --z-sticky-cta: 200;
    --z-menu: 300;

    /* HERO */
    --hero-overlay-opacity: 62%;
    --hero-actions-gap: var(--space-3);
    --hero-desktop-content-width: 46%;
    --hero-desktop-media-width: 54%;

    /* ROADBOOK */
    --roadbook-rail-width: 32px;
    --roadbook-rail-line-width: var(--border-hairline-width);
    --roadbook-sticky-height: 40px;
    --roadbook-mobile-elevation-height: 40px;
    --roadbook-desktop-strip-width: 480px;
    --roadbook-desktop-measure: 720px;
    --roadbook-desktop-elevation-height: 120px;
    --roadbook-transit-opacity: 60%;
    --roadbook-media-ratio: 4 / 3;

    /* ROUTE PAGE */
    --route-hero-media-ratio: 3 / 2;
    --route-person-portrait-ratio: 4 / 5;

    /* ROUTE CARDS */
    --route-card-media-ratio: 4 / 5;

    /*
     * TEMPORARY STOCK IMAGE GRADE.
     * Remove this when real photography arrives; do not layer it over
     * properly graded original photography.
     */
    --media-grade: saturate(0.78) contrast(1.06) brightness(0.97) sepia(0.06);

    /* BUTTON STATES */
    --button-primary-background: var(--saffron);
    --button-primary-background-hover: color-mix(in srgb, var(--saffron) 88%, var(--indigo-deep));
    --button-primary-background-pressed: color-mix(in srgb, var(--saffron) 78%, var(--indigo-deep));
    --button-primary-background-disabled: color-mix(in srgb, var(--saffron) 35%, transparent);
    --button-primary-disabled-text-opacity: 55%;
    --button-pressed-offset: 1px;

    --button-ghost-dark-border: rgba(247, 243, 234, 0.28);
    --button-ghost-dark-border-hover: rgba(247, 243, 234, 0.55);
    --button-ghost-dark-background-pressed: rgba(247, 243, 234, 0.06);
    --button-ghost-dark-border-disabled: rgba(247, 243, 234, 0.12);
    --button-ghost-light-border: rgba(16, 20, 38, 0.28);
    --button-ghost-light-border-hover: rgba(16, 20, 38, 0.55);
    --button-ghost-light-background-pressed: rgba(16, 20, 38, 0.06);
    --button-ghost-light-border-disabled: rgba(16, 20, 38, 0.12);
    --button-ghost-disabled-text-opacity: 40%;

    /* FORM FIELD STATES */
    --field-dark-border-hover: 1px solid rgba(247, 243, 234, 0.15);
    --field-light-border-hover: 1px solid rgba(16, 20, 38, 0.15);
    --field-dark-border-disabled: 1px solid rgba(247, 243, 234, 0.04);
    --field-light-border-disabled: 1px solid rgba(16, 20, 38, 0.04);
    --field-disabled-text-opacity: 45%;
}

@media (min-width: 768px) {
    :root {
        --gutter: 32px;
        --section-space: 96px;
    }
}

@media (min-width: 1024px) {
    :root {
        --gutter: 64px;
        --section-space: 128px;
        --header-height: 80px;
        --header-wordmark-max-width: 200px;
    }
}