globals.css

@import 'tailwindcss';

/* Optional: import Nextra theme styles */
@import 'nextra-theme-docs/style.css';
/* or nextra-theme-blog/style.css */

html.dark {
    /* Nextra primary — vibrant purple (HSL, matching Nextra v4 format) */
    --nextra-primary-hue: 268deg;
    --nextra-primary-saturation: 100%;
    --nextra-primary-lightness: 78%;

    /* Core palette */
    --mix-bg: #05040A;
    --mix-surface: #0D0B14;
    --mix-surface-bright: #161421;
    --mix-accent: #8B5CF6;
    --mix-accent-low: rgba(139, 92, 246, 0.1);
    --mix-accent-glow: rgba(139, 92, 246, 0.18);
    --mix-text-main: #FFFFFF;
    --mix-text-muted: #A1A1AA;
    --mix-border-card: rgba(255, 255, 255, 0.08);

    /* Legacy compat */
    --mix-surface-code: #0D0B14;
    --mix-surface-card: #0D0B14;
    --mix-surface-table-body: #0D0B14;
    --mix-surface-table-head: #161421;
    --mix-border-table: rgba(255, 255, 255, 0.08);

    /* Brand gradients */
    --mix-gradient-heading: linear-gradient(to bottom right, #fff, #a1a1aa);
}

/* Concepta home: brand palette from btwld/design-system.
   Dark-surface roles: primary blue brightened to hold contrast on black,
   aqua reserved as the hero accent. */
html.dark[data-product="concepta"] {
    --nextra-primary-hue: 230deg;
    --nextra-primary-saturation: 100%;
    --nextra-primary-lightness: 61%;

    --mix-accent: #3A5BFF;
    --mix-accent-low: rgba(58, 91, 255, 0.1);
    --mix-accent-glow: rgba(58, 91, 255, 0.18);
}

/* Remix product: override brand accent to green */
html.dark[data-product="remix"] {
    --nextra-primary-hue: 121deg;
    --nextra-primary-saturation: 100%;
    --nextra-primary-lightness: 46%;

    --mix-accent: #00EB03;
    --mix-accent-low: rgba(0, 235, 3, 0.1);
    --mix-accent-glow: rgba(0, 235, 3, 0.18);
}

/* Stargate product: override brand accent to refined cyan */
html.dark[data-product="stargate"] {
    --nextra-primary-hue: 187deg;
    --nextra-primary-saturation: 56%;
    --nextra-primary-lightness: 52%;

    --mix-accent: #3EB8C9;
    --mix-accent-low: rgba(62, 184, 201, 0.1);
    --mix-accent-glow: rgba(62, 184, 201, 0.18);
}

/* Code Analysis product: override brand accent to cyan */
html.dark[data-product="code-analysis"] {
    --nextra-primary-hue: 191deg;
    --nextra-primary-saturation: 100%;
    --nextra-primary-lightness: 50%;

    --mix-accent: #00D3FF;
    --mix-accent-low: rgba(0, 211, 255, 0.1);
    --mix-accent-glow: rgba(0, 211, 255, 0.18);
}

/* Voyager is intentionally distinct from Code Analysis while it is tested as
   an unlisted product: deeper navigation surfaces, cyan signal, violet orbit. */
html.dark[data-product="voyager"] {
    --nextra-primary-hue: 187deg;
    --nextra-primary-saturation: 86%;
    --nextra-primary-lightness: 69%;

    --mix-bg: #050812;
    --mix-surface: #0A1020;
    --mix-surface-bright: #111A31;
    --mix-accent: #67E8F9;
    --mix-accent-low: rgba(103, 232, 249, 0.1);
    --mix-accent-glow: rgba(103, 232, 249, 0.2);
    --mix-surface-code: #0A1020;
    --mix-surface-card: #0A1020;
    --mix-surface-table-body: #0A1020;
    --mix-surface-table-head: #111A31;
    --mix-border-card: rgba(165, 180, 252, 0.12);
    --mix-border-table: rgba(165, 180, 252, 0.14);
}

/* Naked UI product: official blue, lifted for contrast on the dark shell. */
html.dark[data-product="naked-ui"] {
    --nextra-primary-hue: 213deg;
    --nextra-primary-saturation: 94%;
    --nextra-primary-lightness: 68%;

    --mix-accent: #60A5FA;
    --mix-accent-low: rgba(96, 165, 250, 0.1);
    --mix-accent-glow: rgba(96, 165, 250, 0.2);
}

/* Rockets product: official launch-orange palette. */
html.dark[data-product="rockets"] {
    --nextra-primary-hue: 20deg;
    --nextra-primary-saturation: 100%;
    --nextra-primary-lightness: 51%;

    --mix-accent: #FF5906;
    --mix-accent-low: rgba(255, 89, 6, 0.1);
    --mix-accent-glow: rgba(255, 89, 6, 0.2);
}

/* Ack product: blue/cyan validation palette */
html.dark[data-product="ack"] {
    --nextra-primary-hue: 228deg;
    --nextra-primary-saturation: 100%;
    --nextra-primary-lightness: 67%;

    --mix-bg: #060914;
    --mix-surface: #0B1122;
    --mix-surface-bright: #111A31;
    --mix-accent: #315CFF;
    --mix-accent-low: rgba(49, 92, 255, 0.1);
    --mix-accent-glow: rgba(49, 92, 255, 0.18);
    --mix-surface-code: #0B1122;
    --mix-surface-card: #0B1122;
    --mix-surface-table-body: #0B1122;
    --mix-surface-table-head: #111A31;
    --mix-border-table: rgba(153, 175, 226, 0.14);
}

body {
    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 300px),
        fixed 0 0 / 20px 20px radial-gradient(#d1d1d1 1px, transparent 0),
        fixed 10px 10px / 20px 20px radial-gradient(#d1d1d1 1px, transparent 0);
}

code, pre {
    font-family: var(--font-jetbrains-mono), ui-monospace, monospace;
}

.dark body {
    background-color: var(--mix-bg);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        radial-gradient(circle at 50% 20%, var(--mix-accent-glow) 0%, transparent 55%);
    background-size: 40px 40px, 40px 40px, 100% 100%;
    background-attachment: fixed;
}

body ::selection {
    background: var(--nextra-selection, #402649);
    color: inherit;
}


pre {
    background-color: var(--mix-surface-code) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 1rem 1.25rem !important;
    line-height: 1.7 !important;
    font-size: 0.875rem !important;
}

:not(pre) > code {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    font-size: 0.875em;
}

a,
button {
    text-decoration: none !important;
}

a:hover,
button:hover {
    text-decoration: none !important;
}


table {
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--mix-border-table);
}

table th,
table td {
    text-align: left;
    padding: 0.8rem;
    padding-right: 4rem;
    border: none;
    font-size: 0.9rem;
}

table tr:not(:last-child) td {
    border-bottom: 1px solid var(--mix-border-table);
}

tbody td {
    background-color: var(--mix-surface-table-body);
}

th {
    background-color: var(--mix-surface-table-head);
}

table th,
table td {
    width: 1%;
}

nav a, aside a, [role="complementary"] a {
    transition: color 0.15s ease;
}

/* Homepage hero overrides — Nextra forces h1 text-align:center */
.headline {
    text-align: left !important;
}

.subtitle {
    text-align: left !important;
}

/* Shiki overrides for inline snippet highlighting */
.shiki {
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Mix/Remix sidebar switcher: hide the inactive product's top-level group.
   Top-level folders in Nextra render as <li><button data-href="..."> at the
   first level of .nextra-sidebar. We hide the <li> that wraps the inactive
   product's button. */
html[data-product="mix"] .nextra-sidebar li:has(> button[data-href="/documentation/remix"]) {
    display: none !important;
}
html[data-product="mix"] .nextra-sidebar li:has(> button[data-href="/documentation/ack"]) {
    display: none !important;
}
html[data-product="remix"] .nextra-sidebar li:has(> button[data-href="/documentation/mix"]) {
    display: none !important;
}
html[data-product="remix"] .nextra-sidebar li:has(> button[data-href="/documentation/ack"]) {
    display: none !important;
}
html[data-product="ack"] .nextra-sidebar li:has(> button[data-href="/documentation/mix"]),
html[data-product="ack"] .nextra-sidebar li:has(> button[data-href="/documentation/remix"]) {
    display: none !important;
}

/* Flatten the active product's folder: hide its wrapping button so the
   section children appear as top-level entries below the switcher. */
html[data-product="mix"] .nextra-sidebar li > button[data-href="/documentation/mix"],
html[data-product="remix"] .nextra-sidebar li > button[data-href="/documentation/remix"],
html[data-product="ack"] .nextra-sidebar li > button[data-href="/documentation/ack"] {
    display: none !important;
}

/* Un-indent the active product's section list so it aligns with the sidebar. */
html[data-product="mix"] .nextra-sidebar li:has(> button[data-href="/documentation/mix"]) > ul,
html[data-product="remix"] .nextra-sidebar li:has(> button[data-href="/documentation/remix"]) > ul,
html[data-product="ack"] .nextra-sidebar li:has(> button[data-href="/documentation/ack"]) > ul {
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
}

html[data-product="remix"] .nextra-breadcrumb a,
html[data-product="ack"] .nextra-breadcrumb a {
    pointer-events: none;
    cursor: default;
}

/* Keep the first Ack page from paginating backward into Remix. */
html[data-product="ack"] article > div.nextra-border a[href^="/documentation/remix"] {
    display: none !important;
}