/* ============================================
   CORIO design tokens — single source of truth
   Loaded before page stylesheets. Do not redeclare
   these variables in styles.css, landing,
   or mobile styles.
   ============================================ */

@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial'), local('Helvetica Neue'), local('Segoe UI');
    size-adjust: 107%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Instrument Serif';
    src: url('/fonts/InstrumentSerif-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: optional;
}

@font-face {
    font-family: 'Instrument Serif';
    src: url('/fonts/InstrumentSerif-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: optional;
}

:root {
    /* ── Brand Palette (v2 — Neutral Grey + Steel Blue) ──
       Steel Blue:  #7EB0CC  rgb(126,176,204)  accent / interactive
       Steel Light: #9AC4D8  rgb(154,196,216)  accent hover
       Silver:      #D0D0D0  rgb(208,208,208)  secondary accent
       Light Grey:  #B8B8B8  rgb(184,184,184)  muted text
       Snow:        #F0F0F0  rgb(240,240,240)  primary text
       Mid Grey:    #808080  rgb(128,128,128)  subtle text
       Card:        #2F2F2F  rgb(47,47,47)     card background
       Elevated:    #272727  rgb(39,39,39)     elevated surface
       Base:        #1E1E1E  rgb(30,30,30)     page background
       ──────────────────────────────────────────── */

    --color-bg: #1e1e1e;
    --color-bg-elevated: #272727;
    --color-bg-card: #2f2f2f;
    --color-bg-hover: #3a3a3a;
    --color-bg-input: #232323;
    --color-bg-subtle: #252525;
    --color-bg-secondary: var(--color-bg-elevated);
    --color-surface: var(--color-bg-card);

    --color-border: rgba(255, 255, 255, 0.10);
    --color-border-focus: rgba(145, 165, 182, 0.50);
    --color-border-hover: rgba(255, 255, 255, 0.18);

    --color-text: #F0F0F0;
    --color-text-muted: #B8B8B8;
    --color-text-subtle: #808080;

    --color-accent: #7EB0CC;
    --color-accent-hover: #9AC4D8;
    --color-accent-glow: rgba(126, 176, 204, 0.25);
    --color-accent-secondary: #D0D0D0;
    --color-accent-secondary-glow: rgba(208, 208, 208, 0.20);

    --color-success: #34d399;
    --color-warning: #fbbf24;
    --color-error: #f87171;
    --color-info: #60a5fa;

    --color-twitter: #000000;
    --color-twitter-bg: #15202b;
    --color-instagram: #e1306c;
    --color-instagram-gradient: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    --color-tiktok: #000000;
    --color-tiktok-accent: #fe2c55;
    --color-youtube: #ff0000;

    /* X-native preview palette — legal only inside .xwf-dark */
    --x-bg: #000000;
    --x-bg-elevated: #16181c;
    --x-border: #2f3336;
    --x-border-strong: #3e4144;
    --x-text: #e7e9ea;
    --x-text-muted: #71767b;
    --x-blue: #1d9bf0;
    --x-blue-soft: rgba(29, 155, 240, 0.12);
    --x-success: #22c55e;
    --x-warning: #f59e0b;
    --x-error: #f4212e;
    --x-like: #f91880;

    --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-lg: 17px;
    --text-xl: 20px;
    --text-2xl: 26px;
    --text-3xl: 34px;
    --text-4xl: clamp(2.25rem, 5vw, 3.5rem);

    --leading-xs: 1.4;
    --leading-sm: 1.45;
    --leading-base: 1.55;
    --leading-lg: 1.5;
    --leading-xl: 1.4;
    --leading-2xl: 1.25;
    --leading-3xl: 1.15;
    --leading-4xl: 1;

    --tracking-xs: 0.01em;
    --tracking-sm: 0;
    --tracking-base: 0;
    --tracking-lg: -0.005em;
    --tracking-xl: -0.01em;
    --tracking-2xl: -0.02em;
    --tracking-3xl: -0.03em;
    --tracking-4xl: -0.04em;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    --sidebar-width: 280px;
    --sidebar-collapsed: 80px;
    --topbar-height: 0px;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.24), 0 2px 8px rgba(0, 0, 0, 0.16);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.24), 0 8px 24px rgba(0, 0, 0, 0.20);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.20), 0 16px 48px rgba(0, 0, 0, 0.24);
    --shadow-glow: 0 0 30px var(--color-accent-glow);

    --dur-instant: 80ms;
    --dur-fast: 140ms;
    --dur-base: 220ms;
    --dur-slow: 380ms;
    --dur-loop: 1200ms;
    --stagger-step: 40ms;

    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-sharp: cubic-bezier(0.87, 0.05, 0.02, 0.97);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

html {
    scroll-behavior: smooth;
}

.font-display {
    font-family: var(--font-display);
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'cv05' 1;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-instant: 1ms;
        --dur-fast: 1ms;
        --dur-base: 1ms;
        --dur-slow: 1ms;
    }

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
    }

    [data-motion='essential'],
    .spinner,
    .spinner--sm,
    .spinner--lg,
    .xwf-spinner,
    .xwf-spinner--sm,
    .btn-spinner,
    .oauth-spinner,
    .auto-mode-spinner,
    .mobile-spinner,
    .progress-stage.is-active .progress-stage-mark {
        animation-duration: var(--dur-loop) !important;
        animation-name: token-essential-pulse !important;
        animation-timing-function: ease-in-out !important;
    }
}

@keyframes token-essential-pulse {
    0%,
    100% {
        opacity: 0.45;
    }
    50% {
        opacity: 1;
    }
}