/**
 * GenieBlocks Landing — Design tokens (color system)
 * Dark, premium, industrial-tech. WCAG AA–friendly.
 * Use on :root or .theme-dark (or body when dark is default).
 */

:root,
.theme-dark,
body.dark-mode {
  /* ---- Backgrounds ---- */
  --gb-bg: #0a1328;
  --gb-bg-2: #0f172a;
  --gb-surface: #1e293b;
  --gb-surface-2: #334155;

  /* ---- Text ---- */
  --gb-text: #f8fafc;
  --gb-text-muted: #94a3b8;
  --gb-text-inverse: #0f172a;

  /* ---- Primary (CTA, links) ---- */
  --gb-primary: #2563eb;
  --gb-primary-hover: #3b82f6;
  --gb-primary-pressed: #1d4ed8;

  /* ---- Secondary (outline buttons) ---- */
  --gb-secondary: #e2e8f0;
  --gb-secondary-hover: #f1f5f9;

  /* ---- Borders ---- */
  --gb-border: #334155;
  --gb-border-strong: #475569;

  /* ---- Accents ---- */
  --gb-accent-cyan: #06b6d4;
  --gb-accent-amber: #f59e0b;
  /* Amber glow: max 20–25% opacity (soft light, not fire) */
  --gb-amber-glow-max: 0.25;

  /* ---- Semantic ---- */
  --gb-success: #10b981;
  --gb-warning: #f59e0b;
  --gb-danger: #ef4444;

  /* ---- Hero overlay gradient (left dark → right transparent) ---- */
  --gb-hero-overlay: linear-gradient(
    to right,
    rgba(10, 19, 40, 0.94) 0%,
    rgba(15, 23, 42, 0.88) 28%,
    rgba(15, 23, 42, 0.6) 45%,
    rgba(15, 23, 42, 0.25) 58%,
    transparent 72%
  );
  /* Mobile: ~10% darker (higher opacity) for busier background */
  --gb-hero-overlay-mobile: linear-gradient(
    to right,
    rgba(10, 19, 40, 0.97) 0%,
    rgba(15, 23, 42, 0.94) 28%,
    rgba(15, 23, 42, 0.75) 45%,
    rgba(15, 23, 42, 0.4) 58%,
    transparent 72%
  );

  /* ---- Footer (light band) ---- */
  --gb-footer-bg: #f3f5fa;

  /* ---- Section dark gradient (subtle) ---- */
  --gb-section-dark: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.97) 0%,
    rgba(15, 23, 42, 0.92) 100%
  );

  /* ---- Focus (accessibility) ---- */
  --gb-focus-ring: 0 0 0 2px var(--gb-bg), 0 0 0 4px var(--gb-primary);

  /* ---- Typography (see TYPOGRAPHY.md) ---- */
  --gb-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gb-text-h1: 2.5rem;
  --gb-text-h1-mobile: 1.75rem;
  --gb-text-h2: 1.875rem;
  --gb-text-h2-mobile: 1.5rem;
  --gb-text-h3: 1.25rem;
  --gb-text-h3-mobile: 1.125rem;
  --gb-text-body-lg: 1.125rem;
  --gb-text-body-lg-mobile: 1rem;
  --gb-text-body: 1rem;
  --gb-text-body-sm: 0.875rem;
  --gb-text-body-sm-mobile: 0.8125rem;
  --gb-text-btn: 0.9375rem;
  --gb-text-btn-mobile: 0.875rem;
  --gb-leading-tight: 1.15;
  --gb-leading-snug: 1.25;
  --gb-leading-normal: 1.3;
  --gb-leading-relaxed: 1.6;
  --gb-leading-body-sm: 1.5;
  --gb-tracking-tight: -0.02em;
  --gb-tracking-btn: 0.01em;
  --gb-measure-hero: 28em;
  --gb-measure-body: 65ch;
}