/* Gio Tile Design Tokens
 * Mirrors the Next.js/Tailwind design system.
 * Use these variables in Elementor custom CSS for consistency.
 */

:root {
    /* Colors */
    --gio-black: #111111;
    --gio-red: #EC1C24;
    --gio-grey: #F5F5F5;
    --gio-white: #FFFFFF;

    /* Typography — all weights capped at 400 per brand guidelines */
    --font-family: 'BDO Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Font sizes (using clamp for fluid scaling) */
    --font-display: clamp(2rem, 3.6vw, 3.25rem);
    --font-headline: clamp(1.625rem, 2.6vw, 2.375rem);
    --font-title: clamp(1.125rem, 1.6vw, 1.5rem);
    --font-body: 1rem;
    --font-caption: 0.875rem;
    --font-small: 0.75rem;

    /* Letter spacing */
    --tracking-tight: -0.04em;
    --tracking-normal: -0.02em;

    /* Line height */
    --leading-tight: 1.05;

    /* Spacing */
    --space-section: clamp(3.5rem, 8vw, 7.5rem);
    --space-container: clamp(1rem, 3vw, 48px);

    /* Layout */
    --max-container: 1824px;

    /* Transitions */
    --transition-base: 400ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Focus */
    --focus-ring: 2px solid var(--gio-black, #111);
    --focus-ring-offset: 2px;
}

/* Global focus-visible ring — ensures keyboard navigability across all interactive elements */
:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Suppress the default focus ring for mouse/touch — focus-visible handles keyboard */
:focus:not(:focus-visible) {
    outline: none;
}

/* Respect user's motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Global resets matching the Next.js site */
body {
    font-family: var(--font-family);
    font-weight: 400;
    color: var(--gio-black);
    letter-spacing: var(--tracking-normal);
    line-height: var(--leading-tight);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Elementor overrides — force BDO Grotesk everywhere */
.elementor-widget,
.elementor-widget .elementor-heading-title,
.elementor-widget .elementor-text-editor,
.elementor-widget .elementor-button,
.elementor-widget .elementor-icon-list-text {
    font-family: var(--font-family) !important;
}