/* ==========================================================================
   QRA Design System — tokens
   Imported verbatim from the QRA Claude Design project design system
   (qra-design-system-7de67767). Reference named tokens, never loose hex.
   ========================================================================== */

/* ---- Webfonts: Space Grotesk (display), Inter (body), JetBrains Mono ----
   Self-hosted (was `@import fonts.googleapis.com`, which forced a serialized
   waterfall: tokens.css → googleapis CSS → gstatic woff2 = +2–3s on LCP).
   Variable woff2s, split latin / latin-ext by unicode-range so the browser
   only fetches what a given page's text uses. font-display: swap lets fallback
   render immediately. `local()` uses the OS copy if the visitor has one. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: local('Inter'), url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: local('Inter'), url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: local('Space Grotesk'), url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: local('Space Grotesk'), url('/assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: local('JetBrains Mono'), url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: local('JetBrains Mono'), url('/assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root{
  /* ---- Primary · Roxo · identity, CTAs, interactive ---- */
  --primary-50:#F2EFFF; --primary-100:#E0D8FF; --primary-200:#C1B1FF; --primary-300:#A28AFF; --primary-400:#8765FF;
  --primary-500:#6B3FFF; --primary-600:#5632CC; --primary-700:#402699; --primary-800:#2B1966; --primary-900:#150D33;

  /* ---- Secondary · Rosa · highlights, secondary actions ---- */
  --secondary-50:#FCEFF6; --secondary-100:#F8DBEA; --secondary-200:#F3B7D5; --secondary-300:#EE7BB0; --secondary-400:#E83E8C;
  --secondary-500:#C13374; --secondary-600:#9A295D; --secondary-700:#741F46; --secondary-800:#4D142E; --secondary-900:#270A17;

  /* ---- Neutrals · text, surfaces, borders, structure (PURE grays) ---- */
  --neutral-0:#FFFFFF; --neutral-50:#F9F9F9; --neutral-100:#F3F3F3; --neutral-200:#E5E5E5; --neutral-300:#C9C9C9; --neutral-400:#A0A0A0;
  --neutral-500:#757575; --neutral-600:#555555; --neutral-700:#373737; --neutral-800:#1E1E1E; --neutral-900:#0F0F0F;

  /* ---- Ink · purple-tinted neutrals · the real UI grays + dark-theme surfaces ---- */
  /* Additive ramp. Do NOT retint --neutral-* (would silently shift every light surface). */
  --ink-0:#FFFFFF;   --ink-50:#F5F3FB;  --ink-100:#E8E4F2; --ink-200:#CFC9DC; --ink-300:#B4AEC6;
  --ink-400:#A9A3B8; --ink-500:#8E88A0; --ink-600:#6F6982; --ink-700:#4A4560; --ink-800:#17132B;
  --ink-850:#140F26; --ink-900:#0C0918; --ink-950:#0A0713;

  /* ---- Semantic · state feedback ---- */
  --success-50:#ECFDF3; --success-100:#D1FADF; --success-300:#6CE9A6; --success-500:#12B76A; --success-600:#039855; --success-700:#027A48;
  --error-50:#FEF3F2;   --error-100:#FEE4E2;   --error-300:#FDA29B;   --error-500:#F04438;   --error-600:#D92D20;   --error-700:#B42318;
  --warning-50:#FFFAEB; --warning-100:#FEF0C7; --warning-300:#FEC84B; --warning-500:#F79009; --warning-600:#DC6803; --warning-700:#B54708;
  --info-50:#EFF8FF;    --info-100:#D1E9FF;    --info-300:#84CAFF;    --info-500:#2E90FA;    --info-600:#1570EF;    --info-700:#175CD3;

  /* ---- Semantic aliases ---- */
  --brand:var(--primary-500);
  --brand-hover:var(--primary-600);
  --brand-active:var(--primary-700);
  --brand-ink:var(--primary-900);

  --surface-0:var(--neutral-0);   /* canvas */
  --surface-1:var(--neutral-50);  /* raised */
  --surface-2:var(--neutral-100); /* elevated */
  --surface-3:var(--neutral-200); /* card / well */
  --surface-brand-soft:var(--primary-50);
  --surface-secondary-soft:var(--secondary-50);

  --text-strong:var(--neutral-900); /* headings on light */
  --text-body:var(--neutral-700);   /* default body */
  --text-muted:var(--ink-500);      /* secondary — purple-tinted (was --neutral-500) */
  --text-subtle:var(--ink-400);     /* metadata / placeholder — purple-tinted (was --neutral-400) */
  --text-on-brand:var(--neutral-0);
  --text-link:var(--primary-600);
  --text-link-hover:var(--primary-700);
  --text-default:var(--neutral-700);

  --border-default:var(--neutral-200);
  --border-strong:var(--neutral-300);
  --border-interactive:var(--primary-500);
  --border-hairline:rgba(15,13,51,.08);

  --focus-ring:var(--primary-200);
  --focus-ring-danger:var(--error-100);
  --selection-bg:var(--primary-100);
  --selection-fg:var(--primary-900);

  /* ---- Typography ---- */
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;

  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  --tracking-tight:-.02em;
  --tracking-snug:-.01em;
  --tracking-body:.1px;
  --tracking-button:.2px;
  --body-font-features:'calt','kern','liga','ss03';

  /* ---- Type scale (stepped — absorbs the observed inline px sizes) ---- */
  --text-2xs:11px; --text-xs:12px; --text-sm:13px; --text-base:14px; /* --text-base absorbs 13.5 */
  --text-md:15px; --text-lg:17px; --text-xl:19px; --text-2xl:22px;
  --text-3xl:26px; --text-4xl:30px; --text-5xl:46px;

  /* ---- Line heights ---- */
  --leading-none:1; --leading-tight:1.15; --leading-snug:1.3; --leading-normal:1.5; --leading-relaxed:1.6;

  /* ---- Fluid display sizes (hero clamps consolidated) ---- */
  --display-2xl:clamp(40px,5.5vw,64px);
  --display-xl:clamp(30px,4.2vw,56px);
  --display-lg:clamp(28px,3.4vw,42px);
  --display-md:clamp(26px,3.4vw,34px);
  --display-sm:clamp(20px,2.4vw,30px);
  --display-xs:clamp(15px,1.4vw,17px);
  --display-numeral:clamp(130px,21vw,300px);

  /* ---- Spacing (8pt base, 4px half-step) ---- */
  --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;

  /* ---- Radius ---- */
  --radius-none:0; --radius-xs:2px; --radius-sm:4px; --radius-md:6px;
  --radius-lg:8px; --radius-xl:12px; --radius-2xl:16px; --radius-3xl:20px; --radius-full:9999px;

  /* ---- Elevation · generic scale (two-layer, Material-style) ---- */
  --shadow-xs:0 1px 2px rgba(21,13,51,.05);
  --shadow-sm:0 1px 3px rgba(21,13,51,.08),0 1px 2px rgba(21,13,51,.06);
  --shadow-md:0 4px 8px -2px rgba(21,13,51,.10),0 2px 4px -2px rgba(21,13,51,.06);
  --shadow-lg:0 12px 16px -4px rgba(21,13,51,.12),0 4px 6px -2px rgba(21,13,51,.05);
  --shadow-xl:0 20px 24px -4px rgba(21,13,51,.14),0 8px 8px -4px rgba(21,13,51,.05);
  --shadow-focus:0 0 0 3px var(--focus-ring);

  /* ---- Elevation · component shadows (the site's real single-layer shadows) ---- */
  --shadow-card:0 6px 18px rgba(21,13,51,.05);       /* the 40× card shadow */
  --shadow-raise:0 10px 24px rgba(21,13,51,.10);
  --shadow-lift:0 16px 38px rgba(21,13,51,.16);      /* hover pop */
  --shadow-nav:0 10px 34px rgba(21,13,51,.12);
  --shadow-nav-hover:0 14px 40px rgba(21,13,51,.18);
  --shadow-menu:0 20px 50px rgba(21,13,51,.16);
  --shadow-mega:0 26px 64px rgba(21,13,51,.20);

  /* ---- Isometric · Coleção Isométrica foundation (see docs/adr/0007..0009) ----
     Shared projection + palette for every Cena. JS must not hardcode these values
     (a Cena reads tokens via iso.css; no hex in qra-iso-*.js). */
  --iso-scene-rx:51deg;          /* rotateX of the isometric floor */
  --iso-scene-rz:-42deg;         /* rotateZ of the isometric floor */
  --iso-scene-scale:1.15;
  --iso-signo-a:#9B6BFF;         /* signo gradient · top   (≈--primary-300, kept literal to match brand mark) */
  --iso-signo-b:#6B3FFF;         /* signo gradient · mid   (= --primary-500) */
  --iso-signo-c:#4A1FD9;         /* signo gradient · bottom(≈--primary-700, brand mark) */
  --iso-connector:#B9B4E0;       /* dashed path between stations */
  --iso-connector-pkt:#A78BFF;   /* traveling packet on the connector */
  --iso-card-bg:var(--surface-0);
  --iso-card-title:#3A384A;      /* text on white card */
  --iso-card-mut:#8A87A2;        /* muted text on white card */
  --iso-card-tag-bg:#F1EFFA;
  --iso-card-tag-ai-bg:#EBE4FF;
  --iso-card-tag-ai-fg:var(--primary-500);
  --iso-hud-bg:rgba(255,255,255,.85);
  --iso-hud-border:#E2E0F0;
  --iso-step-bg:#EFEDFB;
  --iso-step-fg:#8A87A2;
  --iso-step-on-bg:var(--primary-500);
  --iso-step-on-shadow:0 8px 18px rgba(107,63,255,.35);
  --iso-card-shadow:0 10px 24px rgba(21,13,51,.10);

  /* ---- Breakpoints · CONTRACT (see docs/adr/0004) ----
     Exactly three breaks, desktop-first (max-width). The base rules ARE the
     desktop layout; each media query walks it down. CSS vars can't be used in
     @media — write the literal, and only ever one of these three.
       lg 1024 → the Chrome switches to its collapsed form (drawer) · editorial 3 col → 2
       md  768 → everything stacks
       sm  640 → padding / type tighten
     Anything that only needs to *shrink* (not restructure) belongs in the
     fluid family below instead — no media query required. */
  --bp-sm:640px; --bp-md:768px; --bp-lg:1024px;
  --bp-xl:1280px; /* declared, unused — kept so the ramp reads complete */

  /* ---- Fluid rhythm · replaces the fixed section paddings that were inline ---- */
  --gutter:clamp(16px,4vw,24px);          /* .qra-wrap side padding */
  --section-y:clamp(56px,8vw,88px);       /* standard section band */
  --section-y-lg:clamp(72px,10vw,110px);  /* wider-breathing bands (final CTA) */
  --hero-top:clamp(104px,13vw,150px);     /* hero top, under the overlaid nav */

  color-scheme:light;
}

/* ==========================================================================
   Dark theme — official mode. Overrides ONLY the semantic alias tier, so every
   component that references the surface / text / border / brand aliases adapts
   for free. Set data-theme="dark" on <html> (or <body>). Folds in the former
   growth.css sab-* palette.
   ========================================================================== */
[data-theme="dark"]{
  color-scheme:dark;

  --surface-0:var(--ink-950);   /* canvas   ← --sab-bg   #0A0713 */
  --surface-1:var(--ink-850);   /* raised   ← --sab-panel #140F26 */
  --surface-2:var(--ink-800);   /* elevated ← --sab-panel-2 (≈#1C1533) */
  --surface-3:#241B40;          /* card / well */
  --surface-brand-soft:rgba(107,63,255,.16);
  --surface-secondary-soft:rgba(232,62,140,.16);

  --text-strong:#FFFFFF;
  --text-body:#C9C4D6;
  --text-muted:rgba(255,255,255,.70);
  --text-subtle:rgba(255,255,255,.45);
  --text-default:#C9C4D6;
  --text-link:#FFFFFF;
  --text-link-hover:var(--secondary-400);

  --border-default:rgba(255,255,255,.10);  /* ← --sab-line */
  --border-strong:rgba(255,255,255,.18);
  --border-hairline:rgba(255,255,255,.08);

  /* --brand / --secondary-400 unchanged — the accent colors are theme-agnostic */

  /* Iso overrides — Cenas em dark-theme (ex.: página Growth). Mantêm a
     projeção/paleta de signo (theme-agnostic) e adaptam superfícies/texto. */
  --iso-card-bg:var(--surface-2);         /* ink-800 = card elevated sobre canvas escuro */
  --iso-card-title:var(--text-strong);
  --iso-card-mut:var(--text-muted);
  --iso-card-tag-bg:rgba(255,255,255,.06);
  --iso-card-tag-ai-bg:rgba(107,63,255,.22);
  --iso-hud-bg:rgba(255,255,255,.06);
  --iso-hud-border:rgba(255,255,255,.14);
  --iso-step-bg:rgba(255,255,255,.06);
  --iso-step-fg:var(--text-muted);
  --iso-card-shadow:0 10px 24px rgba(0,0,0,.35);
}