/* ============================================================
GR8 / mindsetlab — Colors & Type tokens
Import first:
Fonts load from Google Fonts (closest-match substitution — see README CAVEAT).
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Archivo+Black&display=swap');
:root {
/* ---------- Brand: GR8 blue (the lab / product register) ---------- */
--gr8-cyan: #7FE0FF; /* handle glow, brightest highlight */
--gr8-blue-glow: #5BB8FF; /* neon bloom, focus rings */
--gr8-blue: #2E9BFF; /* primary accent — buttons, links */
--gr8-blue-600: #1B82EE; /* hover */
--gr8-blue-deep: #0B6FD4; /* pressed / deep edge */
--gr8-blue-ink: #0A3A6B; /* darkest, on-glass tints */
/* ---------- Brand: ARQGUS amber (the stage / speaker register) ------ */
--arqus-glow: #FFC25E; /* highlight */
--arqus-amber: #F59E2C; /* primary warm accent */
--arqus-amber-600: #E8801A; /* hover */
--arqus-deep: #C2691A; /* pressed / deep edge */
/* ---------- Neutrals (cool, blue-leaning grays) ------------------- */
--bg-0: #07090D; /* page — near black */
--bg-1: #0C1118; /* panel / surface */
--bg-2: #121925; /* raised card */
--bg-3: #1B2536; /* hover surface / input */
--line: rgba(255,255,255,0.08); /* hairline border */
--line-2: rgba(255,255,255,0.14); /* stronger border */
--fg-1: #F2F7FF; /* primary text — near white, cool */
--fg-2: #AEBCCE; /* secondary text */
--fg-3: #6B7889; /* tertiary / muted / placeholder */
--fg-on-blue: #04111F; /* text on a solid blue button */
/* light-surface neutrals (for the white-logo register) */
--paper: #F4F7FC;
--ink-1: #0B1622;
--ink-2: #41525F;
/* ---------- Glow / aura (the brand's signature) ------------------- */
--glow-blue: 0 0 24px rgba(91,184,255,.55), 0 0 60px rgba(46,155,255,.30);
--glow-blue-sm: 0 0 12px rgba(91,184,255,.50);
--glow-amber: 0 0 24px rgba(255,194,94,.50), 0 0 64px rgba(245,158,44,.28);
--text-glow-blue: 0 0 10px rgba(127,224,255,.65), 0 0 28px rgba(46,155,255,.45);
--text-glow-amber: 0 0 12px rgba(255,194,94,.6), 0 0 30px rgba(245,158,44,.4);
/* ---------- Radii ------------------------------------------------- */
--r-xs: 6px;
--r-sm: 10px;
--r-md: 14px;
--r-lg: 20px;
--r-xl: 28px;
--r-pill: 999px;
/* ---------- Spacing (4px base) ------------------------------------ */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
/* ---------- Elevation (dark UI uses glow + soft shadow) ----------- */
--sh-1: 0 1px 2px rgba(0,0,0,.5);
--sh-2: 0 6px 20px rgba(0,0,0,.45);
--sh-3: 0 18px 50px rgba(0,0,0,.55);
--inset-hairline: inset 0 0 0 1px var(--line);
/* ---------- Type families ----------------------------------------- */
--font-display: 'Poppins', system-ui, sans-serif; /* wordmark, headings */
--font-body: 'Manrope', system-ui, sans-serif; /* UI + body */
--font-mono: 'JetBrains Mono', ui-monospace, monospace; /* handles, code */
--font-poster: 'Archivo Black', 'Poppins', sans-serif; /* ARQGUS poster */
/* ---------- Motion ------------------------------------------------ */
--ease: cubic-bezier(.22,.61,.36,1); /* @kind other */
--ease-out: cubic-bezier(.16,1,.3,1); /* @kind other */
--dur: 220ms; /* @kind other */
}
/* ============================================================
Semantic type styles
============================================================ */
.gr8-wordmark { font-family: var(--font-display); font-weight: 800; letter-spacing: .04em; }
h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 5vw, 60px); line-height: 1.04; letter-spacing: -.02em; color: var(--fg-1); }
h2, .h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -.015em; color: var(--fg-1); }
h3, .h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; color: var(--fg-1); }
.eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--gr8-blue-glow); }
p, .p { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--fg-2); }
.lead { font-family: var(--font-body); font-weight: 500; font-size: 19px; line-height: 1.55; color: var(--fg-1); }
.small { font-size: 13px; line-height: 1.5; color: var(--fg-3); }
.handle, code, .code { font-family: var(--font-mono); font-weight: 500; color: var(--gr8-cyan); }
.poster { font-family: var(--font-poster); text-transform: uppercase; letter-spacing: .01em; line-height: .92; }
.text-glow { text-shadow: var(--text-glow-blue); }
.text-glow-amber { text-shadow: var(--text-glow-amber); }
/* ============================================================
Bilingual (ES / EN) — shared language toggle
Wrap copy in (renders both ); the
active language is shown via the [data-lang] attr on .
============================================================ */
[data-lang="es"] [lang="en"] { display: none; }
[data-lang="en"] [lang="es"] { display: none; }
.lang { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line-2);
border-radius: var(--r-pill); padding: 3px; background: rgba(255,255,255,.02); }
.lang button { border: 0; background: transparent; color: var(--fg-3); cursor: pointer;
font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; font-weight: 500;
padding: 4px 10px; border-radius: var(--r-pill); transition: all .22s cubic-bezier(.16,1,.3,1); }
.lang button:hover { color: var(--fg-1); }
.lang button.on { background: var(--gr8-blue); color: #fff; }