/* ============================================================
   Tribeo — Colors & Type
   Core design tokens. Import this anywhere you build with the
   Tribeo brand. Fonts load from Google Fonts (Space Grotesk,
   Inter, DM Mono) — all three are the genuine brand families.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Surfaces (near-black foundation) ---------- */
  --bg:        #0D0D0D;   /* page background          */
  --bg-2:      #111114;   /* cards, sections          */
  --bg-3:      #16161B;   /* insets, wells            */
  --bg-4:      #1C1C22;   /* menus, tooltips, overlay */

  /* ---------- Electric violet — primary ---------- */
  --violet-700:#5A18C9;
  --violet-600:#6C22E8;
  --violet-500:#7B2FFF;   /* ★ primary brand color    */
  --violet-400:#9D5BFF;   /* hover, glow              */
  --violet-300:#C2A0FF;   /* on-dark accent text      */

  /* ---------- Neon orange — rare highlight ---------- */
  --orange-600:#E84A12;
  --orange-500:#FF5C1A;   /* ★ key CTA only           */
  --orange-400:#FF6B35;   /* hover                    */

  /* ---------- Text ---------- */
  --text:      #F0F0F0;   /* headings, body           */
  --text-mut:  #8A8A9A;   /* secondary, captions      */
  --text-dim:  #5C5C6B;   /* labels, disabled         */

  /* ---------- Lines + glass ---------- */
  --line:      rgba(255,255,255,0.08);
  --line-2:    rgba(255,255,255,0.14);
  --glass:     rgba(255,255,255,0.04);
  --glass-2:   rgba(255,255,255,0.06);

  /* ---------- Type families ---------- */
  --f-head: "Space Grotesk", sans-serif;  /* headlines, display */
  --f-body: "Inter", sans-serif;          /* body, UI text      */
  --f-mono: "DM Mono", monospace;         /* labels, numbers    */

  /* ---------- Glows (signature soft halos) ---------- */
  --glow-violet: 0 0 40px -8px rgba(123,47,255,0.55);
  --glow-orange: 0 0 40px -8px rgba(255,92,26,0.50);

  /* ---------- Radii ---------- */
  --r-sm:  8px;    /* inputs, small chips        */
  --r-md:  10px;   /* buttons                    */
  --r-lg:  14px;   /* glass panels, swatches     */
  --r-xl:  16px;   /* cards, stages              */
  --r-2xl: 20px;   /* hero panels, app icon      */
  --r-pill:999px;  /* tags, role labels          */

  /* ---------- Spacing scale (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 92px;   /* section vertical rhythm    */

  /* ---------- Motion ---------- */
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-base: 220ms;
  --dur-slow: 250ms;

  /* ---------- Ambient page wash (optional) ---------- */
  --wash:
    radial-gradient(120% 60% at 80% -10%, rgba(123,47,255,0.10), transparent 60%),
    radial-gradient(80% 40% at 0% 0%, rgba(255,92,26,0.04), transparent 55%);
}

/* ============================================================
   Semantic type styles — apply directly or @extend the patterns
   ============================================================ */

.t-display {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 72px;
  line-height: 0.96;
  letter-spacing: -0.035em;
}
.t-h1 {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.0;
  letter-spacing: -0.03em;
}
.t-h2 {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.t-h3 {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.t-body-l {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-mut);
}
.t-body {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-mut);
}
.t-label {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet-400);
}
.t-mono {
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 13px;
  color: var(--text-mut);
}