/* Streamlined Stays — design tokens.
 *
 * Single source of truth for colour, type, spacing, elevation, motion and depth.
 * Generated from the "Streamlined Stays Design System" Claude Design project
 * (tokens/colors.css, typography.css, spacing.css, elevation.css, motion.css,
 * depth.css, semantic.css). Concatenated into one file rather than kept as nine
 * @import lines so the browser makes one blocking request instead of nine.
 *
 * Loaded site-wide from render_seo_tags() in includes/seo.php.
 * The portal token set is admin-only and deliberately not included here.
 *
 * No @import for webfonts. The design system's fonts.css pulls Montserrat from
 * Google Fonts, but this site already loads it per page on window.load with a
 * <noscript> fallback — deliberately non-blocking. An @import here would be
 * fetched only after this file parses, turning that into a render-blocking
 * request on every page. Font loading stays where the pages put it.
 */

:root {
    /* ---- Brand core ---- */
    --ss-navy: #2b376a;
    --ss-navy-deep: #25315f;
    --ss-navy-ink: #202b56;
    --ss-navy-hover: #556799;
    --ss-navy-sidebar: #002147;
    --ss-blue: #1873ba;
    --ss-blue-dark: #115283;
    --ss-blue-deeper: #0a466f;
    --ss-gold: #c9a86d;
    --ss-gold-light: #f0c879;
    --ss-green: #276749;
    --ss-green-cta: #168a49;

    /* ---- Neutrals / surfaces ---- */
    --ss-white: #ffffff;
    --ss-paper: #faf9f5;
    --ss-mist: #eef2f7;
    --ss-sand: #e6e3d8;
    --ss-answer: #eef5fb;
    --ss-border: #d9dde7;
    --ss-border-soft: #e5e7eb;

    /* ---- Text ---- */
    --ss-ink: #172033;
    --ss-ink-strong: #111827;
    --ss-body: #414958;
    --ss-lead: #394052;
    --ss-muted: #5a6270;
    --ss-muted-warm: #555e6d;
    --ss-gray: #6b7280;
    --ss-on-navy: #faf9f5;
    --ss-on-navy-soft: #e0e5f3;
    --ss-on-navy-dim: #bfc7dc;

    /* ---- Partner brand (Furnished Unfurnished footer strip) ---- */
    --fuf-purple: #6048e0;
    --fuf-purple-deep: #5341a8;
    --fuf-tint: #f4f2fc;

    /* ---- Scrims used over photography ---- */
    --ss-scrim-hero: rgba(19, 29, 62, .68);
    --ss-scrim-navy-0: rgba(43, 55, 106, 0);
    --ss-scrim-navy-80: rgba(43, 55, 106, .8);
    --ss-scrim-navy-90: rgba(43, 55, 106, .9);
    --ss-scrim-ink-45: rgba(17, 24, 39, .45);
    --ss-scrim-ink-75: rgba(17, 24, 39, .75);
    --ss-pill-stone: rgba(113, 110, 101, .9);

    /* ---- Neutral greys ----
     * Not part of the design system's brand palette. These are the recurring
     * one-off greys already present across the site's inline styles, named here
     * so the migration can consolidate them instead of leaving them hardcoded.
     */
    --ss-gray-100: #f5f5f5;
    --ss-gray-150: #f4f4f4;
    --ss-gray-200: #eeeeee;
    --ss-gray-300: #dddddd;
    --ss-gray-400: #cccccc;
    --ss-gray-500: #888888;
    --ss-gray-700: #555555;
    --ss-gray-800: #333333;

    /* Legacy accent from index.php's old --secondary. Kept explicit rather than
     * silently remapped onto a brand blue — it is a different colour. */
    --ss-legacy-secondary: #0b47a8;

    /* ---- Type families ---- */
    --ss-font-sans: "Montserrat", Arial, sans-serif;
    --ss-font-serif: Georgia, "Times New Roman", serif;
    --ss-font-portal: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* ---- Display / editorial serif ---- */
    --ss-size-hero: 4rem;
    --ss-lh-hero: 1.04;
    --ss-size-h1-page: 3rem;
    --ss-size-h2: 2.45rem;
    --ss-lh-h2: 1.14;
    --ss-size-h2-sm: 2rem;
    --ss-size-h3: 1.8rem;
    --ss-size-card-title: 1.55rem;
    --ss-size-card-title-lg: 2rem;

    /* ---- Uppercase sans display (service pages) ---- */
    --ss-size-section-title: 2.6rem;
    --ss-size-hero-upper: 3.5rem;

    /* ---- Body ---- */
    --ss-size-lead: 1.16rem;
    --ss-size-body-lg: 1.08rem;
    --ss-size-body: 1.04rem;
    --ss-size-body-sm: .95rem;
    --ss-size-meta: .9rem;
    --ss-size-eyebrow: .82rem;
    --ss-size-nav: .78rem;
    --ss-size-micro: .72rem;
    --ss-lh-body: 1.7;
    --ss-lh-tight: 1.35;

    /* ---- Weights ---- */
    --ss-weight-regular: 400;
    --ss-weight-medium: 500;
    --ss-weight-semibold: 600;
    --ss-weight-bold: 700;
    --ss-weight-heavy: 800;
    --ss-weight-black: 900;

    /* ---- Letter spacing ---- */
    --ss-track-label: .06em;
    --ss-track-none: 0;

    /* ---- Spacing scale ---- */
    --ss-space-1: 4px;
    --ss-space-2: 8px;
    --ss-space-3: 12px;
    --ss-space-4: 15px;
    --ss-space-5: 20px;
    --ss-space-6: 24px;
    --ss-space-7: 26px;
    --ss-space-8: 28px;
    --ss-space-9: 36px;
    --ss-space-10: 40px;
    --ss-space-11: 50px;
    --ss-space-12: 60px;
    --ss-space-13: 70px;
    --ss-space-14: 82px;

    /* ---- Layout ---- */
    --ss-shell: min(1180px, calc(100% - 48px));
    --ss-shell-narrow: min(1120px, calc(100% - 40px));
    --ss-shell-article: 760px;
    --ss-band-y: 82px;
    --ss-band-y-sm: 60px;
    --ss-nav-height: 76px;
    --ss-nav-height-mobile: 72px;
    --ss-hero-pad-top: 170px;
    --ss-card-pad: 28px;
    --ss-grid-gap: 24px;
    --ss-grid-gap-wide: 70px;

    /* ---- Radii ---- */
    --ss-radius-xs: 4px;
    --ss-radius-sm: 5px;
    --ss-radius: 6px;
    --ss-radius-md: 8px;
    --ss-radius-lg: 10px;
    --ss-radius-xl: 15px;
    --ss-radius-pill: 100px;
    --ss-radius-portal: .35rem;

    /* ---- Hit targets ---- */
    --ss-tap-min: 44px;
    --ss-control-h: 48px;
    --ss-nav-item-h: 42px;

    /* ---- Elevation ---- */
    --ss-shadow-nav: 0 2px 10px rgba(0, 0, 0, .2);
    --ss-shadow-dropdown: 0 14px 30px rgba(13, 20, 48, .24);
    --ss-shadow-card: 0 4px 15px rgba(0, 0, 0, .08);
    --ss-shadow-card-hover: 0 8px 20px rgba(0, 0, 0, .12);
    --ss-shadow-listing: 0 5px 15px rgba(0, 0, 0, .1);
    --ss-shadow-panel: 0 8px 24px rgba(17, 24, 39, .12);
    --ss-shadow-modal: 0 15px 40px rgba(0, 0, 0, .15);
    --ss-shadow-fab: 0 4px 10px rgba(0, 0, 0, .18);
    --ss-ring-focus: 0 0 0 3px rgba(24, 115, 186, .1);
    --ss-outline-focus: 3px solid var(--ss-gold);
    --ss-lift: -5px;
    --ss-lift-strong: -8px;
    --ss-lift-subtle: -2px;

    /* ---- Motion ---- */
    --ss-ease: ease;
    --ss-ease-zoom: cubic-bezier(.25, 1, .5, 1);
    --ss-dur-fast: .18s;
    --ss-dur-quick: .2s;
    --ss-dur-base: .25s;
    --ss-dur-slow: .3s;
    --ss-dur-zoom: .6s;
    --ss-transition: all .3s ease;
    --ss-transition-nav: color .2s ease;
    --ss-transition-dropdown: opacity .18s ease, transform .18s ease, visibility .18s ease;
    --ss-zoom-hover: 1.05;

    /* ---- Depth / camera ----
     * Used by the CSS-3D scenes (hero, service tiles, coverage map, unit viewer).
     * CSS 3D only, no WebGL, so the whole system keeps working on locked-down machines.
     */
    --ss-perspective: 1400px;
    --ss-perspective-near: 900px;
    --ss-tilt-max: 6deg;
    --ss-z-plate: -220px;
    --ss-z-far: -90px;
    --ss-z-mid: 40px;
    --ss-z-near: 140px;
    --ss-z-ui: 220px;

    /* Tile depth — the service-tile grid. */
    --ss-perspective-tile: 900px;
    --ss-z-lift: 26px;
    --ss-z-label: 48px;
    --ss-tile-lift-shadow: 0 26px 46px rgba(11, 18, 46, .34);
    --ss-panel-radius: 6px;
    --ss-ease-camera: cubic-bezier(.22, .61, .36, 1);
    --ss-dur-camera: .9s;
    --ss-dur-tilt: .35s;

    /* Cinematic lighting: a cool key from upper-left, navy bounce from below. */
    --ss-key-light: radial-gradient(120% 90% at 18% 6%, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, 0) 55%);
    --ss-fill-light: linear-gradient(to top, rgba(43, 55, 106, .85) 0%, rgba(43, 55, 106, .25) 42%, rgba(43, 55, 106, 0) 72%);
    --ss-panel-shadow: 0 34px 60px -18px rgba(11, 18, 46, .62), 0 8px 18px -8px rgba(11, 18, 46, .45);
    --ss-panel-shadow-lift: 0 52px 88px -20px rgba(11, 18, 46, .7), 0 12px 24px -10px rgba(11, 18, 46, .5);
    --ss-panel-edge: 1px solid rgba(250, 249, 245, .22);

    /* Orbit ring (unit viewer) — panels on a light studio floor, so the shadows
       are softer and shorter than the hero's. */
    --ss-orbit-shadow-front: 0 26px 44px -14px rgba(23, 32, 51, .42), 0 6px 14px -6px rgba(23, 32, 51, .28);
    --ss-orbit-shadow-side: 0 14px 26px -10px rgba(23, 32, 51, .28);
    --ss-orbit-floor: linear-gradient(180deg, #e7ebf2 0%, #f4f5f8 62%, #dfe4ee 100%);
    --ss-contact-shadow: radial-gradient(50% 50% at 50% 50%, rgba(11, 18, 46, .5) 0%, rgba(11, 18, 46, 0) 70%);

    /* Copy protection for the headline layer when panels pass behind it. */
    --ss-scrim-copy: linear-gradient(to right, rgba(19, 29, 62, .86) 0%, rgba(19, 29, 62, .62) 38%, rgba(19, 29, 62, 0) 72%);

    /* ---- Semantic aliases — prefer these in components ---- */
    --surface-page: var(--ss-paper);
    --surface-card: var(--ss-white);
    --surface-band: var(--ss-white);
    --surface-band-alt: var(--ss-mist);
    --surface-band-invert: var(--ss-navy);
    --surface-sand: var(--ss-sand);
    --surface-note: var(--ss-answer);

    --text-heading: var(--ss-navy);
    --text-heading-invert: var(--ss-white);
    --text-body: var(--ss-body);
    --text-lead: var(--ss-lead);
    --text-muted: var(--ss-muted);
    --text-eyebrow: var(--ss-gold);
    --text-eyebrow-on-light: var(--ss-blue-deeper);
    --text-link: var(--ss-blue-dark);
    --text-on-navy: var(--ss-on-navy-soft);

    --border-hairline: var(--ss-border);
    --border-input: var(--ss-border-soft);
    --rule-accent: var(--ss-gold);

    --action-primary-bg: var(--ss-gold);
    --action-primary-ink: var(--ss-navy-ink);
    --action-primary-bg-hover: var(--ss-white);
    --action-secondary-bg: var(--ss-navy);
    --action-secondary-ink: var(--ss-white);
    --action-secondary-bg-hover: var(--ss-navy-hover);
    --action-ghost-border: rgba(255, 255, 255, .58);
    --action-quiet-bg: var(--ss-blue);
    --action-quiet-bg-hover: var(--ss-blue-dark);

    --font-display: var(--ss-font-serif);
    --font-ui: var(--ss-font-sans);
    --font-app: var(--ss-font-portal);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --ss-dur-fast: 0s;
        --ss-dur-quick: 0s;
        --ss-dur-base: 0s;
        --ss-dur-slow: 0s;
        --ss-dur-zoom: 0s;
        --ss-transition: none;
        --ss-tilt-max: 0deg;
        --ss-dur-camera: 0s;
        --ss-dur-tilt: 0s;
    }
}