/* ==========================================================================
   Prestige 8 Solutions: base styles
   Design tokens, page defaults, typography and page-to-page transitions.
   Loaded on every page, before components.css and the page stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */

:root {
    --void: #030712;
    --sapphire: #2563EB;
    --electric: #06B6D4;
    --silver: #F5F5F7;
    --hairline: rgba(3, 7, 18, 0.10);
    --hairline-on-dark: rgba(255, 255, 255, 0.12);
    --danger: #B42318;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: #FFFFFF;
    color: var(--void);
    font-family: Inter, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-weight: 300;
    font-feature-settings: "cv11", "ss03", "calt";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Tailwind compiles its utilities in the browser a moment after the page is parsed. The
   header is styled by components.css and shows at once. The page content stays hidden
   until the utilities have arrived, so nothing is ever seen unstyled. The animation is a
   fail-safe: if a script is blocked, the content still appears after a short wait. */
body.is-loading main,
body.is-loading .site-footer {
    opacity: 0;
    animation: page-failsafe 0s linear 2.5s forwards;
}

body.is-ready main,
body.is-ready .site-footer {
    opacity: 1;
    transition: opacity 0.5s ease;
}

@keyframes page-failsafe {
    to { opacity: 1; }
}

[hidden] {
    display: none !important;
}

/* Text for screen readers only. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

::selection {
    background: rgba(6, 182, 212, 0.28);
}

:focus-visible {
    outline: 2px solid var(--sapphire);
    outline-offset: 3px;
    border-radius: 6px;
}

.on-dark :focus-visible {
    outline-color: var(--electric);
}

h1:focus,
h2:focus {
    outline: none;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.display {
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 0.98;
    text-wrap: balance;
}

.heading {
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.06;
    text-wrap: balance;
}

.prose-body {
    font-weight: 300;
    font-size: 1.0625rem;
    line-height: 1.68;
    color: rgba(3, 7, 18, 0.72);
    text-wrap: pretty;
}

.on-dark .prose-body {
    color: rgba(255, 255, 255, 0.70);
}

.numerals {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum", "cv11";
}

/* --------------------------------------------------------------------------
   Page transitions
   Moving between pages cross-fades the old page into the new one in browsers
   that support cross-document view transitions. Others simply load the page.
   -------------------------------------------------------------------------- */

@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.45s;
    animation-timing-function: ease;
}

/* --------------------------------------------------------------------------
   Reduced motion
   Everything is shown in its finished state.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    @view-transition {
        navigation: none;
    }
}