/* Oltra Systems — Global stylesheet entry point.
   GitHub dark theme (Primer-inspired): full dark surfaces + neon glow accents. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
:root {
  /* ---- Base palette (GitHub Primer dark) ---- */
  --carbon: #0d1117;        /* primary dark background — canvas default */
  --steel-deep: #161b22;    /* secondary dark background — canvas subtle */
  --steel: #30363d;         /* borders / muted surfaces */
  --steel-line: #30363d;    /* hairline borders on dark surfaces */
  --steel-accent: #58a6ff;  /* accent blue (GitHub) */

  --paper: #0d1117;         /* former light sections — now canvas default */
  --paper-card: #161b22;    /* card surface */
  --paper-line: #30363d;    /* hairline borders */

  --white: #f0f6fc;
  --ink: #e6edf3;           /* primary text */

  /* Neutral ramp (inverted for full-dark: former light roles resolve dark) */
  --slate-50:  #161b22;
  --slate-100: #21262d;
  --slate-200: #30363d;
  --slate-300: #c9d1d9;
  --slate-400: #8b949e;
  --slate-500: #6e7681;
  --slate-600: #8b949e;
  --slate-700: #30363d;
  --slate-800: #161b22;
  --slate-900: #0d1117;

  /* Functional (GitHub status colors — now proudly neon) */
  --danger: #f85149;        /* lost money / leaks */
  --danger-soft: #da3633;
  --positive: #3fb950;      /* captured / converted */
  --warning: #d29922;

  /* ---- Neon accents (github.com homepage) ---- */
  --accent-blue: #58a6ff;
  --accent-purple: #bc8cff;
  --accent-pink: #f778ba;
  --accent-green: #3fb950;
  --accent-green-bright: #56d364;

  /* ---- Semantic aliases ---- */
  --surface-base: var(--carbon);
  --surface-alt: var(--steel-deep);
  --surface-light: var(--paper);
  --surface-card-dark: var(--steel-deep);
  --surface-card-light: var(--paper-card);

  --text-on-dark: var(--white);
  --text-on-dark-muted: #8b949e;
  --text-on-dark-subtle: #6e7681;
  --text-on-light: var(--ink);
  --text-on-light-muted: #8b949e;
  --text-on-light-subtle: #6e7681;

  --border-dark: var(--steel-line);
  --border-light: var(--paper-line);
  --accent: var(--accent-blue);

  --eyebrow: var(--accent-blue);       /* eyebrow label color */
  --eyebrow-light: var(--accent-blue);

  /* Focus ring */
  --focus-ring: rgba(88, 166, 255, 0.5);
}

:root {
  /* ---- Families ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, "Menlo", "Consolas", monospace;

  /* ---- Weights ---- */
  --fw-regular: 400;   /* @kind font */ /* body */
  --fw-medium: 500;    /* @kind font */
  --fw-semibold: 600;  /* @kind font */ /* subheadings, eyebrows, UI labels */
  --fw-bold: 700;      /* @kind font */ /* headlines, logo */
  --fw-extrabold: 800; /* @kind font */ /* hero headlines */

  /* ---- Type scale (rem; 1rem = 16px) ---- */
  --text-xs:   0.75rem;   /* 12px — legal, captions */
  --text-sm:   0.875rem;  /* 14px — fine print, metadata */
  --text-base: 1rem;      /* 16px — body */
  --text-md:   1.125rem;  /* 18px — lead body */
  --text-lg:   1.25rem;   /* 20px — large body / card titles */
  --text-xl:   1.5rem;    /* 24px — subheadline */
  --text-2xl:  1.875rem;  /* 30px — section sub */
  --text-3xl:  2.25rem;   /* 36px — section headline */
  --text-4xl:  3rem;      /* 48px — large headline */
  --text-5xl:  3.75rem;   /* 60px — hero headline */
  --text-6xl:  4.5rem;    /* 72px — display */

  /* ---- Line heights ---- */
  --leading-tight: 1.08;   /* hero / display headlines */
  --leading-snug: 1.2;     /* section headlines */
  --leading-normal: 1.5;   /* body */
  --leading-relaxed: 1.65; /* long-form body */

  /* ---- Letter spacing ---- */
  --tracking-tight: -0.03em;   /* large headlines */
  --tracking-snug: -0.015em;   /* subheads */
  --tracking-normal: 0;
  --tracking-wide: 0.08em;     /* eyebrows */
  --tracking-wider: 0.15em;    /* logo, all-caps labels */

  /* ---- Semantic roles ---- */
  --type-hero: var(--fw-extrabold) var(--text-5xl)/var(--leading-tight) var(--font-sans);
  --type-headline: var(--fw-bold) var(--text-3xl)/var(--leading-snug) var(--font-sans);
  --type-subhead: var(--fw-semibold) var(--text-xl)/var(--leading-snug) var(--font-sans);
  --type-body: var(--fw-regular) var(--text-base)/var(--leading-relaxed) var(--font-sans);
  --type-lead: var(--fw-regular) var(--text-md)/var(--leading-relaxed) var(--font-sans);
}

:root {
  /* ---- Spacing scale (4px base grid) ---- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --space-24: 6rem;    /* 96 */
  --space-32: 8rem;    /* 128 */

  /* Section rhythm */
  --section-pad-y: 6rem;       /* vertical padding per section (desktop) */
  --section-pad-y-sm: 3.5rem;  /* mobile */
  --container-max: 1200px;     /* page content max-width */
  --container-pad-x: 1.5rem;   /* gutter */

  /* ---- Radii ---- */
  --radius-none: 0;
  --radius-sm: 4px;    /* inputs, small chips */
  --radius-md: 8px;    /* buttons, badges */
  --radius-lg: 12px;   /* cards */
  --radius-xl: 16px;   /* feature cards, dashboard panels */
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --border-thin: 1px;
  --border-thick: 1.5px;
}

:root {
  /* ---- Elevation ---- */
  --shadow-none: none;

  /* Dark-canvas shadows — deep blacks (GitHub style) */
  --shadow-xs: 0 1px 2px rgba(1, 4, 9, 0.4);
  --shadow-sm: 0 1px 3px rgba(1, 4, 9, 0.5), 0 1px 2px rgba(1, 4, 9, 0.3);
  --shadow-md: 0 4px 12px rgba(1, 4, 9, 0.5), 0 2px 4px rgba(1, 4, 9, 0.3);
  --shadow-lg: 0 12px 28px rgba(1, 4, 9, 0.55), 0 4px 8px rgba(1, 4, 9, 0.35);
  --shadow-xl: 0 24px 48px rgba(1, 4, 9, 0.6);

  /* Dark-surface depth — subtle ring + lift */
  --ring-dark: inset 0 0 0 1px rgba(240, 246, 252, 0.08); /* @kind shadow */
  --ring-dark-hover: inset 0 0 0 1px rgba(240, 246, 252, 0.16); /* @kind shadow */
  --shadow-dark-lift: 0 20px 40px rgba(1, 4, 9, 0.65);

  /* Neon glows */
  --glow-blue: 0 0 24px rgba(88, 166, 255, 0.35);
  --glow-purple: 0 0 24px rgba(188, 140, 255, 0.35);
  --glow-green: 0 0 24px rgba(63, 185, 80, 0.35);
  --glow-red: 0 0 24px rgba(248, 81, 73, 0.3);

  /* Focus */
  --focus-shadow: 0 0 0 3px var(--focus-ring);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms;     /* @kind other */
  --dur-base: 240ms;     /* @kind other */
  --dur-slow: 600ms;     /* @kind other */
}

/* ---- GitHub-style neon layer ---- */

html { background: #0d1117; color-scheme: dark; }
body { background: #0d1117; }

/* Gradient headline text (blue → purple → pink, like github.com) */
.gh-gradient-text {
  background: linear-gradient(96deg, #58a6ff 10%, #bc8cff 45%, #f778ba 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.gh-gradient-text-green {
  background: linear-gradient(96deg, #56d364 10%, #3fb950 55%, #2ea043 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Radial glow orbs — position inside a section with position:relative + overflow:hidden */
.gh-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.gh-glow--blue   { background: radial-gradient(circle, rgba(88, 166, 255, 0.28) 0%, rgba(88, 166, 255, 0) 70%); }
.gh-glow--purple { background: radial-gradient(circle, rgba(163, 113, 247, 0.30) 0%, rgba(163, 113, 247, 0) 70%); }
.gh-glow--green  { background: radial-gradient(circle, rgba(63, 185, 80, 0.22) 0%, rgba(63, 185, 80, 0) 70%); }
.gh-glow--pink   { background: radial-gradient(circle, rgba(247, 120, 186, 0.22) 0%, rgba(247, 120, 186, 0) 70%); }

/* Neon beam — thin glowing horizontal line (GitHub section dividers) */
.gh-beam {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, rgba(48, 54, 61, 0) 0%, #58a6ff 30%, #bc8cff 50%, #f778ba 70%, rgba(48, 54, 61, 0) 100%);
  box-shadow: 0 0 18px rgba(139, 116, 255, 0.55);
  opacity: 0.85;
}

/* Glowing card border on hover */
.gh-card-glow { transition: border-color 240ms cubic-bezier(0.16,1,0.3,1), box-shadow 240ms cubic-bezier(0.16,1,0.3,1), transform 240ms cubic-bezier(0.16,1,0.3,1); }
.gh-card-glow:hover {
  border-color: rgba(88, 166, 255, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.35), 0 0 32px rgba(88, 166, 255, 0.18), 0 16px 40px rgba(1, 4, 9, 0.6);
  transform: translateY(-2px);
}
.gh-card-glow--purple:hover {
  border-color: rgba(188, 140, 255, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(188, 140, 255, 0.35), 0 0 32px rgba(188, 140, 255, 0.20), 0 16px 40px rgba(1, 4, 9, 0.6);
}
.gh-card-glow--green:hover {
  border-color: rgba(63, 185, 80, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(63, 185, 80, 0.35), 0 0 32px rgba(63, 185, 80, 0.18), 0 16px 40px rgba(1, 4, 9, 0.6);
}

/* Soft pulsing glow (status dots, live indicators) */
@keyframes gh-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(63, 185, 80, 0); }
}
.gh-pulse { animation: gh-pulse 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .gh-pulse { animation: none; }
  .gh-card-glow, .gh-card-glow:hover { transform: none; }
}