/* ============================================================
   vercel-mesh — dark theme overrides
   The terms and guide pages still carry Tailwind's light utility classes;
   these rules re-map them onto the same design tokens as the home page.
   ============================================================ */
:root {
    --ground:      #000000;
    --surface-1:   #0A0A0A;
    --surface-2:   #111111;
    --hairline:    rgba(255,255,255,0.08);
    --hairline-hi: rgba(255,255,255,0.16);
    --text:        #EDEDED;
    --text-dim:    #888888;
    --text-faint:  #555555;
    --mesh-blue:   #0070F3;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --font-sans: "Geist Sans", "Inter Tight", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

html, body {
    /* Literal values: Tailwind's background rules sit inside nested blocks, so a
       var() shorthand is not reliable here */
    background-color: #000000 !important;
    background-image: none !important;
}
body {
    color: var(--text) !important;
    font-family: var(--font-sans) !important;
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
}

/* Containers: glassmorphism → hairline cards */
.glass-effect,
[class*="bg-white"] {
    background: var(--surface-1) !important;
    backdrop-filter: none !important;
    border: 1px solid var(--hairline) !important;
    box-shadow: none !important;
}

/* Text hierarchy */
[class*="text-gray-8"], [class*="text-gray-9"], h1, h2, h3 { color: #FFFFFF !important; }
[class*="text-gray-7"], [class*="text-gray-6"] { color: var(--text) !important; }
[class*="text-gray-5"], [class*="text-gray-4"] { color: var(--text-dim) !important; }

h1, h2, h3 { letter-spacing: -0.02em; }

/* Accents collapse to the brand blue */
[class*="text-blue-"], [class*="text-purple-"], [class*="text-indigo-"],
[class*="text-orange-"], [class*="text-amber-"], [class*="text-green-"] {
    color: var(--mesh-blue) !important;
}

/* Borders and rules */
[class*="border-gray-"], [class*="border-blue-"], .border { border-color: var(--hairline) !important; }

/* Code blocks */
pre, code, [class*="bg-gray-9"], [class*="bg-gray-8"] {
    background: var(--surface-2) !important;
    border: 1px solid var(--hairline) !important;
    color: #C9D6E5 !important;
    font-family: var(--font-mono) !important;
}

/* Links and buttons: white primary, ghost secondary */
a { transition: color 200ms var(--ease); }
button[class*="bg-blue-5"], button[class*="bg-blue-6"],
button[class*="from-blue-"], button[class*="from-orange-"],
a[class*="bg-blue-5"], a[class*="from-blue-"], a[class*="from-orange-"] {
    background: #FFFFFF !important;
    background-image: none !important;
    color: #000000 !important;
    border: none !important;
}
button[class*="bg-blue-5"]:hover, button[class*="bg-blue-6"]:hover,
button[class*="from-blue-"]:hover, button[class*="from-orange-"]:hover { background: #E5E5E5 !important; }

/* Light panels (step cards, callouts) → dark surfaces */
div[class*="bg-gray-5"], div[class*="bg-gray-1"], div[class*="bg-blue-1"],
div[class*="bg-orange-1"], div[class*="bg-amber-1"], div[class*="bg-green-1"] {
    background: var(--surface-2) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--text) !important;
}

/* Icon tiles: the purple→indigo gradient is exactly the cliché this system
   avoids, so they become hairline surfaces instead */
div[class*="from-purple-"], div[class*="from-blue-500"], div[class*="from-indigo-"] {
    background: var(--surface-2) !important;
    background-image: none !important;
    border: 1px solid var(--hairline) !important;
    box-shadow: none !important;
    color: var(--text-dim) !important;
}
div[class*="from-purple-"] i, div[class*="from-blue-500"] i, div[class*="from-indigo-"] i {
    color: var(--text-dim) !important;
}
/* Footer back-link: white primary button */
a[class*="from-blue-500"], a[class*="from-indigo-"] {
    background: #FFFFFF !important;
    background-image: none !important;
    color: #000000 !important;
    box-shadow: none !important;
}
a[class*="from-blue-500"]:hover, a[class*="from-indigo-"]:hover { background: #E5E5E5 !important; }

/* Orange icon tiles are neutralised the same way */
div[class*="from-orange-"], div[class*="from-amber-"] {
    background: var(--surface-2) !important;
    background-image: none !important;
    border: 1px solid var(--hairline) !important;
    box-shadow: none !important;
}
div[class*="from-orange-"] i, div[class*="from-amber-"] i { color: var(--text-dim) !important; }

/* Coloured left-border accents → hairline (another pattern this system avoids) */
[class*="border-l-4"], [class*="border-l-2"] {
    border-left-color: var(--hairline-hi) !important;
}

/* Brand lockup */
.brand-inline { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-inline img { width: 22px; height: 22px; display: block; }
.brand-inline span { font-size: 14px; font-weight: 600; color: var(--text); }