/* ══════════════════════════════════════════════════════════════════════
 * Genetic Quant.ai — Reflect-inspired Design System
 * Editorial dark. Warm-dark canvas (#080808). Sans-only typography.
 * Generous whitespace. Subtle radial glows. Hairline borders.
 * Inspired by reflect.app — restraint and clarity above all.
 * ══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Azeret+Mono:wght@300;400;500&family=Fraunces:opsz,wght,SOFT@9..144,300..700,0..100&display=swap');

:root,
.gq {
  /* ---- Canvas & surfaces (warm dark à la Reflect) ------------------- */
  --gq-canvas:               #080808;             /* warm-dark, not pure black */
  --gq-bg:                   #080808;
  --gq-surface-card:         #0f0f0f;             /* card resting */
  --gq-card:                 #0f0f0f;
  --gq-surface-elevated:     #161616;             /* hover / featured */
  --gq-surface-deep:         #050505;             /* code wells, inputs */
  --gq-surface-light:        #f5f5f5;

  /* ---- Hairlines (Reflect uses very subtle) ------------------------- */
  --gq-hairline:             rgba(255, 255, 255, 0.06);
  --gq-hairline-strong:      rgba(255, 255, 255, 0.10);
  --gq-divider-soft:         rgba(255, 255, 255, 0.04);
  --gq-border:               rgba(255, 255, 255, 0.10);
  --gq-input:                rgba(255, 255, 255, 0.10);

  /* ---- Text (slightly cool off-white) ------------------------------- */
  --gq-ink:                  #f5f5f7;
  --gq-fg:                   #f5f5f7;
  --gq-body:                 rgba(245, 245, 247, 0.80);
  --gq-charcoal:             rgba(245, 245, 247, 0.60);
  --gq-mute:                 rgba(245, 245, 247, 0.45);
  --gq-muted-fg:             rgba(245, 245, 247, 0.45);
  --gq-ash:                  rgba(245, 245, 247, 0.30);
  --gq-subtle:               rgba(245, 245, 247, 0.25);
  --gq-stone:                rgba(245, 245, 247, 0.20);

  /* ---- Primary CTA (white pill) ------------------------------------- */
  --gq-primary:              #f5f5f7;
  --gq-primary-fg:           #0a0a0a;
  --gq-primary-pressed:      #e8e8eb;
  --gq-ring:                 #f5f5f7;

  /* ---- Reflect accent (warm amber + muted purple) ------------------ */
  --gq-accent-amber:         #11ff99;             /* GQ neon green (was amber) */
  --gq-accent-amber-glow:    rgba(17, 255, 153, 0.22);
  --gq-accent-violet:        #D946EF;
  --gq-accent-violet-glow:   rgba(217, 70, 239, 0.22);
  --gq-accent-blue:          #60a5fa;
  --gq-accent-blue-glow:     rgba(96, 165, 250, 0.20);
  --gq-accent-rose:          #fb7185;
  --gq-accent-rose-glow:     rgba(251, 113, 133, 0.20);

  /* Trading status (kept) */
  --gq-accent-green:         #11ff99;
  --gq-accent-green-glow:    rgba(17, 255, 153, 0.16);
  --gq-accent-red:           #f87171;
  --gq-accent-red-glow:      rgba(248, 113, 113, 0.20);
  --gq-accent-yellow:        #3b9eff;
  --gq-accent-yellow-glow:   rgba(59, 158, 255, 0.18);

  /* Legacy aliases */
  --gq-accent-orange:        #11ff99;
  --gq-accent-orange-glow:   rgba(17, 255, 153, 0.22);

  /* ---- Semantic ----------------------------------------------------- */
  --gq-link:                 #60a5fa;
  --gq-success:              #11ff99;
  --gq-warning:              #3b9eff;
  --gq-destructive:          #f87171;
  --gq-destructive-fg:       #f5f5f7;
  --gq-accent:               #11ff99;
  --gq-accent-fg:            #0a0a0a;

  /* ---- Radii (slightly softer than before) -------------------------- */
  --gq-radius-none:          0;
  --gq-radius-xs:            4px;
  --gq-radius-sm:            6px;
  --gq-radius-md:            8px;
  --gq-radius-lg:            12px;
  --gq-radius-xl:            16px;
  --gq-radius-2xl:           24px;
  --gq-radius-full:          9999px;
  --gq-radius:               8px;

  /* ---- Spacing (Reflect uses generous rhythm) ----------------------- */
  --gq-space-xxs:            2px;
  --gq-space-xs:             4px;
  --gq-space-sm:             8px;
  --gq-space-md:             12px;
  --gq-space-lg:             16px;
  --gq-space-xl:             24px;
  --gq-space-xxl:            32px;
  --gq-space-xxxl:           48px;
  --gq-space-section:        128px;               /* Reflect uses big gaps */
  --gq-space-band:           160px;
  /* legacy numbered aliases */
  --gq-space-1:  4px;  --gq-space-2:  8px;  --gq-space-3: 12px;
  --gq-space-4: 16px;  --gq-space-6: 24px;  --gq-space-8: 32px;
  --gq-space-12: 48px; --gq-space-16: 64px;

  /* ---- Type families (Manrope body, Azeret Mono data, Fraunces serif display) --------------------- */
  --font-body:       'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:       'Azeret Mono', ui-monospace, 'SF Mono', Menlo, Monaco, monospace;
  --font-display:    'Fraunces', Georgia, 'Times New Roman', serif;
  --gq-font-display: var(--font-body);
  --gq-font-sans:    var(--font-body);
  --gq-font-ui:      var(--font-body);
  --gq-font-mono:    var(--font-mono);

  /* ---- Type scale ---------------------------------------------------- */
  --gq-display-xxl: 88px;
  --gq-display-xl:  64px;
  --gq-display-lg:  48px;
  --gq-heading-md:  22px;
  --gq-heading-sm:  18px;
  --gq-subtitle:    18px;
  --gq-body-lg:     17px;
  --gq-body-md:     15px;
  --gq-body-sm:     13px;
  --gq-caption:     12px;
  --gq-code:        13px;

  /* ---- Weights ------------------------------------------------------- */
  --gq-weight-regular:  400;
  --gq-weight-medium:   500;
  --gq-weight-semibold: 600;
  --gq-weight-bold:     700;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Element styles
 * ═══════════════════════════════════════════════════════════════════════ */
body.gq {
  margin: 0;
  background: var(--gq-canvas);
  color: var(--gq-ink);
  font-family: var(--gq-font-ui);
  font-size: var(--gq-body-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11" 1, "ss03" 1;
}

/* Display headings — bold sans, tight tracking, generous line-height */
.gq h1, h1.gq-h1, .gq-display-xxl {
  font-family: var(--gq-font-display);
  font-size: clamp(54px, 7vw, var(--gq-display-xxl));
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--gq-ink);
  margin: 0;
}
.gq h2, h2.gq-h2, .gq-display-xl {
  font-family: var(--gq-font-display);
  font-size: clamp(40px, 5vw, var(--gq-display-xl));
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--gq-ink);
  margin: 0;
}
.gq-display-lg {
  font-family: var(--gq-font-display);
  font-size: var(--gq-display-lg);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--gq-ink);
  margin: 0;
}

/* UI headings */
.gq h3, h3.gq-h3, .gq-heading-md {
  font-family: var(--gq-font-ui);
  font-size: var(--gq-heading-md);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: var(--gq-ink);
  margin: 0;
}
.gq h4, h4.gq-h4, .gq-heading-sm {
  font-family: var(--gq-font-ui);
  font-size: var(--gq-heading-sm);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--gq-ink);
  margin: 0;
}

/* Body */
.gq-subtitle {
  font-family: var(--gq-font-ui);
  font-size: var(--gq-subtitle);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--gq-body);
}
.gq-body-lg, p.gq-p {
  font-family: var(--gq-font-ui);
  font-size: var(--gq-body-lg);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--gq-body);
}
.gq-body-md {
  font-family: var(--gq-font-ui);
  font-size: var(--gq-body-md);
  font-weight: 400;
  line-height: 1.6;
  color: var(--gq-body);
}
.gq-body-sm, .gq-caption-md {
  font-family: var(--gq-font-ui);
  font-size: var(--gq-body-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--gq-body);
}

/* Section tag — small caps label above headlines (Reflect signature) */
.gq-tag {
  font-family: var(--gq-font-ui);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: 0.04em;
  color: var(--gq-accent-amber);
  text-transform: none;
  margin-bottom: 16px;
}

/* Mono */
.gq-mono, code.gq-mono, .gq-numeric {
  font-family: var(--gq-font-mono);
  font-size: var(--gq-code);
  line-height: 1.55;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Links */
.gq a, a.gq-link {
  color: var(--gq-link);
  font-family: var(--gq-font-ui);
  font-weight: 500;
  text-decoration: none;
  transition: opacity 120ms ease;
}
.gq a:hover, a.gq-link:hover { opacity: 0.7; }

/* ═══════════════════════════════════════════════════════════════════════
 * Utilities
 * ═══════════════════════════════════════════════════════════════════════ */
.gq-hairline-border        { border: 1px solid var(--gq-hairline); }
.gq-hairline-border-strong { border: 1px solid var(--gq-hairline-strong); }
.gq-hairline-bottom        { border-bottom: 1px solid var(--gq-hairline); }

.gq-glow-amber  { background: radial-gradient(60% 80% at 50% 0%, var(--gq-accent-amber-glow),  transparent 70%); }
.gq-glow-violet { background: radial-gradient(60% 80% at 50% 0%, var(--gq-accent-violet-glow), transparent 70%); }
.gq-glow-blue   { background: radial-gradient(60% 80% at 50% 0%, var(--gq-accent-blue-glow),   transparent 70%); }
.gq-glow-rose   { background: radial-gradient(60% 80% at 50% 0%, var(--gq-accent-rose-glow),   transparent 70%); }
.gq-glow-green  { background: radial-gradient(60% 80% at 50% 0%, var(--gq-accent-green-glow),  transparent 70%); }
.gq-glow-yellow { background: radial-gradient(60% 80% at 50% 0%, var(--gq-accent-yellow-glow), transparent 70%); }

/* Selection */
::selection { background: var(--gq-accent-blue); color: #080808; }