/* Virtarix Sans (showcase production font) */
@font-face {
    font-family: 'Virtarix Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/virtarix-sans/virtarix-sans-400-normal.woff2) format('woff2');
}

@font-face {
    font-family: 'Virtarix Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/virtarix-sans/virtarix-sans-400-italic.woff2) format('woff2');
}

@font-face {
    font-family: 'Virtarix Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/virtarix-sans/virtarix-sans-500-normal.woff2) format('woff2');
}

@font-face {
    font-family: 'Virtarix Sans';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/virtarix-sans/virtarix-sans-500-italic.woff2) format('woff2');
}

@font-face {
    font-family: 'Virtarix Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/virtarix-sans/virtarix-sans-600-normal.woff2) format('woff2');
}

@font-face {
    font-family: 'Virtarix Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/virtarix-sans/virtarix-sans-700-normal.woff2) format('woff2');
}

/* Virtarix public design tokens.
 * Canonical runtime owner for brand colors, surface colors, and font-family CSS variables.
 * Typography utilities are generated by Tailwind from fixed semantic values to avoid root-variable bloat.
 */

:root {
    color-scheme: light;

    /* Brand palette */
    --vtx-primary: #020281;
    --vtx-secondary: #174EA6;
    --vtx-accent: #fc5186;
    --vtx-supporting-accent: #00e4c0;

    /* Text and neutral surfaces */
    --vtx-heading: #252525;
    --vtx-copy: #2c2e31;
    --vtx-text-secondary: #5d5d5d;
    --vtx-white: #ffffff;
    --vtx-black: #000000;
    --vtx-grey: #64748b;
    --vtx-grey-muted: #6c757d;
    --vtx-grey-subtle: #94a3b8;
    --vtx-grey-bg: #f9fafe;
    --vtx-grey-soft: #f8fafc;
    --vtx-grey-surface: #f7f8fa;
    --vtx-grey-panel: #f8f9fa;
    --vtx-grey-border: #e2e8f0;
    --vtx-grey-border-strong: #cbd5e1;
    --vtx-grey-border-soft: #eeeeee;
    --vtx-grey-dark: #1e293b;
    --vtx-light-blue: #eff5ff;
    --vtx-strip-widget-icon-bg: #eaf1ff;

    /* Semantic support colors */
    --vtx-success: #007a68;
    --vtx-warning: #b45309;
    --vtx-outage: #dc2626;
    --vtx-status-operational: #16a34a;
    --vtx-status-degraded: #f59e0b;
    --vtx-status-outage: #dc2626;
    --vtx-link: #0d6efd;
    --vtx-dark-link: #0a0a2e;
    --vtx-border: #d6dde8;
    --vtx-proof-border: #dbe2ea;
    --vtx-panel-border: #e0e0e0;
    --vtx-trustpilot: #00B67A;

    /* Status timeline component tokens */
    --vtx-status-unit-height: 2.125rem;
    --vtx-status-unit-height-mobile: 1.75rem;
    --vtx-status-unit-radius: 2px;
    --vtx-status-unit-gap: clamp(1px, 0.28vw, 3px);
    --vtx-status-unit-gap-mobile: 2px;
    --vtx-status-tooltip-width: 20rem;
    --vtx-status-tooltip-width-mobile: 18rem;
    --vtx-status-tooltip-offset: 0.7rem;
    --vtx-status-tooltip-arrow-size: 0.8rem;
    --vtx-status-tooltip-arrow-offset: 1rem;
    --vtx-status-tooltip-viewport-gutter: 3rem;
    --vtx-status-unit-hover-scale: 1.08;
    --vtx-status-row-padding-mobile: 1rem;
    --vtx-status-row-heading-gap-mobile: 0.75rem;
    --vtx-status-incident-card-gap: 0.75rem;
    --vtx-status-section-padding-bottom-mobile: 6rem;

    /* Shape tokens */
    --vtx-card-radius: 8px;
    --vtx-button-radius: 999px;
    --vtx-section-composer-number-badge-size: 2.25rem;
    --vtx-section-composer-number-heading-gap: 1rem;

    /* Location art visual component tokens */
    --vtx-location-art-min-height: 19rem;
    --vtx-location-art-radius: 1rem;
    --vtx-location-art-grid-size: 2rem;
    --vtx-location-art-ring-size: 12rem;
    --vtx-location-art-content-padding: 2rem;
    --vtx-location-art-country-padding: 0.35rem 0.7rem;
    --vtx-location-art-country-font-size: 0.75rem;
    --vtx-location-art-country-line-height: 1rem;
    --vtx-location-art-code-font-size: 4.5rem;
    --vtx-location-art-code-font-size-mobile: 3.8rem;
    --vtx-location-art-city-font-size: 1.5rem;
    --vtx-location-art-city-line-height: 2rem;
    --vtx-location-art-meta-font-size: 0.875rem;
    --vtx-location-art-meta-line-height: 1.5rem;

    /* Layout tokens */
    --vtx-container-site: 1320px;
    --vtx-blog-table-mobile-min-width: 48rem;
    --vtx-blog-grid-footer-padding-bottom: 12rem;
    --vtx-blog-grid-footer-overlap: 6rem;
    --vtx-blog-presentation-eyebrow-size: 0.75rem;
    --vtx-blog-presentation-eyebrow-tracking: 0.08em;
    --vtx-blog-presentation-compact-gap: 0.75rem;
    --vtx-blog-presentation-control-gap: 0.5rem;
    --vtx-blog-presentation-tab-padding: 0.625rem 0.875rem;
    --vtx-blog-presentation-author-image-size: 6rem;
    --vtx-blog-presentation-author-image-size-mobile: 4.5rem;
    --vtx-blog-presentation-mobile-card-padding: 1.25rem;
    --vtx-blog-presentation-toc-min-width: 11rem;
    --vtx-blog-presentation-offer-min-width: 14rem;
    --vtx-mega-menu-viewport-gutter: 48px;
    --vtx-mega-menu-hover-bridge: 30px;
    --vtx-mega-menu-top-default: 106px;
    --vtx-hero-widget-stage-height: 35rem;
    --vtx-hero-widget-cards-bottom: 7.625rem;
    --vtx-hero-widget-platform-bottom: 1.25rem;
    --vtx-hero-widget-platform-width: min(66.25rem, 116%);
    --vtx-hero-widget-platform-shadow: 0 1rem 1.75rem color-mix(in srgb, var(--vtx-secondary) 13%, transparent);
    --vtx-hero-widget-platform-tablet-shift: 0%;
    --vtx-hero-widget-cards-width: min(49.375rem, 100%);
    --vtx-hero-widget-card-min-height: 23.125rem;
    --vtx-hero-widget-featured-min-height: 24.5rem;
    --vtx-hero-widget-featured-shift: -1.5625rem;
    --vtx-hero-widget-grid-gap: 1.5rem;
    --vtx-hero-widget-stage-shift: 3.125rem;
    --vtx-hero-widget-multi-extra-height: 16.25rem;
    --vtx-hero-widget-multi-cards-bottom: 4.5rem;
    --vtx-hero-widget-tablet-padding-block: 2rem;
    --vtx-hero-widget-tablet-platform-max-width: 45rem;
    --vtx-hero-widget-tablet-cards-max-width: 47.5rem;
    --vtx-hero-widget-tablet-platform-offset: -1.5rem;
    --vtx-hero-widget-tablet-gap: 1rem;

    /* CTA split-card layout tokens */
    --vtx-cta-split-band-gap: 2.25rem;
    --vtx-cta-split-band-padding: clamp(1.75rem, 4vw, 2.625rem);
    --vtx-cta-split-glow-height: 16.25rem;
    --vtx-cta-split-glow-radius: var(--vtx-button-radius);
    --vtx-cta-split-glow-bg: color-mix(in srgb, var(--vtx-white) 16%, transparent);
    --vtx-cta-split-glow-blur: 0.375rem;
    --vtx-cta-split-row-gap: 0.875rem;
    --vtx-cta-split-card-padding: 1.15rem;
    --vtx-cta-split-card-bg: color-mix(in srgb, var(--vtx-white) 94%, transparent);
    --vtx-cta-split-card-border: color-mix(in srgb, var(--vtx-white) 22%, transparent);
    --vtx-cta-split-icon-size: 2.125rem;
    --vtx-cta-split-icon-inner-size: 1.25rem;
    --vtx-cta-split-icon-bg: color-mix(in srgb, var(--vtx-primary) 8%, transparent);
    --vtx-cta-split-icon-gap: 0.85rem;
    --vtx-cta-split-heading-icon-gap: 0.75rem;
    --vtx-cta-split-kicker-height: 1.25rem;
    --vtx-cta-split-kicker-padding-x: 0.625rem;
    --vtx-cta-split-right-min: 22.5rem;
    --vtx-cta-split-left-fr: 1.08fr;
    --vtx-cta-split-right-fr: 0.92fr;

    --vtx-product-cards-reference-bg: #02040f;
    --vtx-product-cards-reference-card-bg: #081023;
    --vtx-product-cards-reference-muted: #9ca8bd;
    --vtx-product-cards-section-bg: var(--vtx-primary);
    --vtx-product-cards-section-flat-bg: var(--vtx-product-cards-reference-bg);
    --vtx-product-cards-shell-bg: var(--vtx-product-cards-reference-bg);
    --vtx-product-cards-shell-border: color-mix(in srgb, var(--vtx-white) 11%, transparent);
    --vtx-product-cards-card-bg: var(--vtx-product-cards-reference-card-bg);
    --vtx-product-cards-card-featured-bg: var(--vtx-product-cards-reference-card-bg);
    --vtx-product-cards-card-border: color-mix(in srgb, var(--vtx-white) 11%, transparent);
    --vtx-product-cards-card-overlap: -1px;
    --vtx-product-cards-card-featured-border: var(--vtx-accent);
    --vtx-product-cards-card-padding: 2rem;
    --vtx-product-cards-card-gap: 0;
    --vtx-product-cards-featured-offset: -1rem;
    --vtx-product-cards-featured-height-extra: 2rem;
    --vtx-product-cards-featured-border-width: 2px;
    --vtx-product-cards-featured-padding-top: 2.25rem;
    --vtx-product-cards-featured-padding-bottom: 2.75rem;
    --vtx-product-cards-badge-bg: color-mix(in srgb, var(--vtx-accent) 10%, transparent);
    --vtx-product-cards-badge-border: color-mix(in srgb, var(--vtx-accent) 65%, transparent);
    --vtx-product-cards-badge-padding-y: 0.25rem;
    --vtx-product-cards-badge-padding-x: 0.75rem;
    --vtx-product-cards-badge-letter-spacing: 0.14em;
    --vtx-product-cards-muted: var(--vtx-product-cards-reference-muted);
    --vtx-product-cards-muted-strong: color-mix(in srgb, var(--vtx-white) 82%, transparent);
    --vtx-product-cards-divider: color-mix(in srgb, var(--vtx-white) 12%, transparent);
    --vtx-product-cards-detail-gap: 0.75rem;
    --vtx-product-cards-dot-size: 0.625rem;
    --vtx-product-cards-accent-height: 0.25rem;
    --vtx-product-cards-button-radius: 0.375rem;
    --vtx-product-cards-button-height: 2.6875rem;

    /* Code and special UI surfaces */
    --vtx-code: #f5f2f0;
    --vtx-code-terminal: #06062e;
    --vtx-code-ref: #f7f7f8;
    --vtx-code-ref-start: #f9f9f9;
    --vtx-code-ref-border: #d8dee4;
    --vtx-code-ref-text: #24292e;
    --vtx-code-ref-caption: #57606a;
    --vtx-code-ref-gutter: #69727c;
    --vtx-code-ref-command: #c72c3b;
    --vtx-code-ref-variable: #1f7a33;
    --vtx-code-ref-string: #032f62;
    --vtx-code-ref-comment: #69727c;
    --vtx-code-ref-built-in: #6f42c1;
    --vtx-code-ref-meta: #b34b00;
    --vtx-code-ref-option: #8a4b08;
    --vtx-code-ref-operator: #c72c3b;
    --vtx-code-copy: #57606a;
    --vtx-code-copy-hover-bg: #eaeef2;
    --vtx-code-copy-hover: #040581;
    --vtx-code-copy-focus: #020281;
    --vtx-code-copy-success: #1f7a33;
    --vtx-code-copy-failure: #b42318;
    --vtx-code-caption-background: var(--vtx-primary);
    --vtx-code-caption-foreground: var(--vtx-white);
    --vtx-code-caption-size: 0.75rem;
    --vtx-code-caption-line-height: 1.125rem;
    --vtx-code-caption-padding-block: 0.5rem;
    --vtx-code-caption-padding-inline: 0.875rem;
    --vtx-code-font-size: 0.8125rem;
    --vtx-code-line-height: 1.5rem;
    --vtx-code-copy-icon-size: 1rem;
    --vtx-code-copy-padding: 0.1875rem;
    --vtx-code-copy-radius: 0.25rem;
    --vtx-code-frame-radius: var(--vtx-card-radius);
    --vtx-code-frame-border-width: 1px;
    --vtx-code-frame-shadow: inset 0 1px 0 color-mix(in srgb, var(--vtx-white) 65%, transparent);
    --vtx-code-padding-block: 0.875rem;
    --vtx-code-padding-inline: 1rem;
    --vtx-code-gutter-padding-inline: 0.75rem;
    --vtx-code-control-size: 1.75rem;
    --vtx-code-control-offset: 0.5rem;
    --vtx-code-control-gap: 0.5rem;

    /* Fonts */
    --font-family-poppins: "Virtarix Sans", sans-serif;
    --font-family-virtarix-sans: "Virtarix Sans", "Mona Sans", sans-serif;
    --font-family-mona-mono: "Mona Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.bg-light-blue,
.bg-soft-blue {
    background-color: var(--vtx-light-blue);
}