/* Theme */

:root,
::selection {

    /* Default palette */
    --color-50: oklch(100% 0 0);
    --color-100: oklch(98.17% 0.0005 95.87);
    --color-200: oklch(96.27% 0.0026 252.34);
    --color-300: oklch(91.79% 0.0029 264.26);
    --color-400: oklch(89.24% 0.0024 12.48);
    --color-500: oklch(67.4% 0.0318 251.27);
    --color-600: oklch(48.26% 0.0365 255.09);
    --color-700: oklch(28.7% 0.030787 270.1);
    --color-800: oklch(20.7% 0.026326 268.7);
    --color-900: oklch(16.6% 0.026 267);
    --color-950: oklch(3.89% 0.0181 262.25);

    /* Light theme */
    --color-page: var(--color-50);
    --color-surface-1: var(--color-100);
    --color-surface-2: var(--color-200);
    --color-surface-3: var(--color-300);
    --color-content-stark: var(--color-900);
    --color-content-neutral: var(--color-600);
    --color-content-subtle: var(--color-500);
    --color-field-surface: var(--color-300);
    --color-field-surface-hover: var(--color-400);
    --color-field-inverse: var(--color-content-stark);
    --color-popover-surface: var(--color-page);
    --color-line: color-mix(in oklch, var(--color-content-stark) 11%, transparent);
    --color-brand-surface: oklch(71.8% 0.202 349.761);
    --color-brand-surface-hover: oklch(65.6% 0.241 354.308);
    --color-brand-inverse: #fff;
    --color-brand-content: oklch(71.8% 0.202 349.761);
    --color-accent-surface: #ffccd3;
    --color-accent-surface-hover: #ffa1ad;
    --color-accent-inverse: #a50036;
    --color-accent-content: #ff637e;
    --color-positive-surface: #16a34a;
    --color-positive-surface-hover: #166534;
    --color-positive-inverse: white;
    --color-positive-content: var(--color-positive-surface);
    --color-negative-surface: #ef4444;
    --color-negative-surface-hover: #dc2626;
    --color-negative-inverse: white;
    --color-negative-content: var(--color-negative-surface);

    /* Sizes */
    --radius: 0rem;
    --spacing: 0.25rem;
    --spacing-field-padding: calc(var(--spacing) * 4);
    --spacing-field-height: calc(var(--spacing) * 14);
    --spacing-popover-offset: calc(var(--spacing) * 2);
    --spacing-viewport-padding: 2rem;
    --spacing-content-width: 90rem;

    /* Effects */
    --transition: all .05s ease-in-out;

    /* Fonts */
    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

/* Dark theme overrides */
.dark {
    --color-page: var(--color-950);
    --color-surface-1: var(--color-900);
    --color-surface-2: var(--color-800);
    --color-surface-3: var(--color-700);
    --color-field-surface: var(--color-700);
    --color-field-surface-hover: var(--color-600);
    --color-popover-surface: var(--color-700);
    --color-content-stark: var(--color-50);
    --color-content-neutral: var(--color-400);
    --color-content-subtle: var(--color-500);
    --color-brand-content: oklch(71.8% 0.202 349.761);
    --color-accent-content: #ffa1ad;

    /* Popover form elements */
    :where([popover]) {
        --color-field-surface: color-mix(in oklch, var(--color-600) 60%, var(--color-700));
        --color-field-surface-hover: color-mix(in oklch, var(--color-600) 80%, var(--color-700));
    }
}

@layer base {

    /* Default font and colors */
    :where(html),
    :host {
        line-height: 1.5;
        font-family: var(--font-sans);
        color: var(--color-content-stark, inherit);
        background-color: var(--color-page, inherit)
    }

    /* Text selection */
    ::selection {
        background-color: color-mix(in oklch, var(--color-surface-1) 92%, var(--color-content-stark))
    }

    /* Focus state */
    :where(:focus-visible),
    :where(label:has(input, button, [role="button"], [type="button"], select, textarea):focus-within) {
        outline: none;
        box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-content-stark) 35%, transparent);
    }
}

@layer components {

    /* Body */
    :where(body) {
        display: flex;
        flex-direction: column
    }

    /* Footer */
    :where(footer) {
        margin-top: auto;
        padding: 10rem var(--spacing-viewport-padding);
        background-color: var(--color-surface-1);

        /* Embedded pattern */
        position: relative;
        overflow: hidden;

        &::before {
            content: "";
            position: absolute;
            top: -10px;
            left: -10px;
            width: calc(100% + 20px);
            height: calc(100% + 20px);
            max-height: calc(100% + 20px);
            z-index: 0;
            background: linear-gradient(to top, var(--color-surface-3), transparent, transparent);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='1'%3E%3Cpath d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            pointer-events: none;
        }

        & a:hover {
            color: var(--color-brand-content)
        }

        &>nav {
            z-index: 1
        }
    }

    /* Sections (parent to .content) */
    :where(section) {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        border-bottom: 1px dashed var(--color-line);
        border-bottom: 1px dashed var(--color-line)
    }

    :where(header, footer) {
        display: grid;
        grid-template-columns: repeat(6, 1fr);

        @media (min-width: 768px) {
            grid-template-columns: repeat(12, 1fr)
        }
    }

    /* Typography */
    :where(blockquote) {
        font-size: 1.5rem;
        font-weight: 300;
        border-inline-start-width: 2px
    }

    :where(h1, .h1) {
        font-size: 3rem;
        font-weight: 200
    }

    :where(h2, .h2) {
        font-size: 2rem;
        font-weight: 900;
        letter-spacing: -0.07ch;
        font-style: italic;
        text-decoration: underline;
        text-decoration-thickness: 0.125em;
        text-decoration-color: color-mix(in oklch, var(--color-content-subtle) 35%, transparent)
    }

    :where(h3, .h3) {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--color-brand-content)
    }

    :where(h4, .h4) {
        font-size: 1.1rem;
        letter-spacing: -0.03ch;
    }

    :where(mark) {
        border-radius: 0
    }

    :where(p) {
        color: var(--color-content-neutral)
    }
}


@layer utilities {

    /* Hero (for sections) */
    .hero {
        & h1 {
            width: 38rem;
            max-width: 100%;
            text-wrap: balance
        }

        & p {
            width: 38rem;
            max-width: 100%;
            font-size: 1.25rem;
            font-weight: 300;
            line-height: 1.5;
            color: var(--color-content-neutral);
            text-wrap: balance
        }
    }

    /* Content width (child of sections, header, footer) */
    .content {
        grid-column: 2 / span 10;
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        max-width: 100%;
        width: 100%;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Mobile responsive adjustments */
    @media (max-width: 768px) {
        :where(section) {
            grid-template-columns: repeat(1, 1fr);
        }

        .content {
            grid-column: 1 / span 1;
            grid-template-columns: repeat(1, 1fr)
        }
    }

    /* Features grid (pricing page) */
    .features-grid {

        .header-row,
        .feature-row {
            display: grid;
            grid-template-columns: repeat(6, 1fr);

            &>div {
                padding: 1rem
            }

            &>div:not(.label) {
                font-size: 0.875rem;
                text-align: center;
                color: var(--color-content-stark)
            }

            .label span:has([x-tooltip]) {
                text-decoration: underline;
                text-decoration-color: var(--color-content-subtle);
                text-decoration-style: dotted;
                text-underline-offset: 0.25em;
                cursor: help
            }
        }
    }

    /* Overlay */
    .overlay-dark {
        &.pattern-grid {
            &::before {
                background: linear-gradient(to bottom right, rgba(80, 80, 80, 0.2), transparent, transparent);
                z-index: 1
            }
        }

        &::after {
            z-index: 2;
            background-color: rgba(0, 0, 0, 0.85)
        }
    }

    /* Patterns */
    .pattern {
        position: relative;
        overflow: hidden;

        &::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            max-height: calc(100% + 20px);
            z-index: -1;
            background: var(--color-surface-2)
        }
    }

    .pattern-grid::before {
        top: -10px;
        left: -10px;
        width: calc(100% + 20px);
        height: calc(100% + 20px);
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='1'%3E%3Cpath d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .pattern-dice::before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='126' height='84' viewBox='0 0 126 84'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='1'%3E%3Cpath d='M126 83v1H0v-2h40V42H0v-2h40V0h2v40h40V0h2v40h40V0h2v83zm-2-1V42H84v40h40zM82 42H42v40h40V42zm-50-6a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM8 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm96 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm-42 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm30-12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM20 54a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm12 24a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM8 54a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM8 78a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm12 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm54 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM50 54a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM50 78a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm54-12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm12 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM92 54a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM92 78a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24-42a4 4 0 1 1 0-8 4 4 0 0 1 0 8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .pattern-signal::before {
        mask-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%239C92AC' fill-opacity='0.57' fill-rule='evenodd'/%3E%3C/svg%3E");
    }

    .pattern-top-fade::before {
        background: linear-gradient(to bottom, var(--color-surface-2), transparent, transparent)
    }

    .pattern-top-start-fade::before {
        background: linear-gradient(to bottom right, var(--color-surface-2), transparent, transparent)
    }

    .pattern-top-end-fade::before {
        background: linear-gradient(to bottom left, var(--color-surface-2), transparent, transparent)
    }

    .pattern-bottom-fade::before {
        background: linear-gradient(to top, var(--color-surface-2), transparent, transparent)
    }

    .pattern-bottom-end-fade::before {
        background: linear-gradient(to top left, var(--color-surface-2), transparent, transparent)
    }

    /* Prose */
    .prose {
        & blockquote {
            margin-block-start: 0;
            margin-block-end: 0;
            font-size: 1.15rem
        }

        & h2 {
            font-style: normal;
            font-weight: 700;
            font-size: 1.75rem;
            text-decoration: none
        }

        & h3 {
            font-size: 1.25rem;
            color: var(--color-content-stark)
        }

        & strong {
            color: var(--color-content-stark)
        }
    }

    /* Selected button state */
    .selected {
        background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% .0029 264.26)) 50%, transparent);
    }

    /* Side lines (for .content containers) */
    .sidelines {
        @media (min-width: 768px) {
            border-inline-start: 1px dashed var(--color-line);
            border-inline-end: 1px dashed var(--color-line);
        }
    }

    /* Article card link */
    .article-card {
        display: flex;
        flex-direction: row;
        color: var(--color-field-inverse);
        text-decoration: none;
        background-color: var(--color-surface-2);

        &:hover {
            background-color: var(--color-field-surface);
        }

        & img {
            border: 1px solid var(--color-line);
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
        }

        & p {
            color: var(--color-content-stark)
        }

        & span {
            font-size: 0.875rem;
            color: var(--color-content-neutral)
        }
    }
}