/* ============================================================
   FELIX AI LABS — Color & Type Foundations
   Dark space / AI operations-center aesthetic.
   Import this file anywhere you build Felix-branded surfaces.
   ============================================================ */

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

:root {
  /* ---------- BACKGROUNDS (deep space) ---------- */
  --bg-0: #05060f;        /* page floor — deepest space */
  --bg-1: #080a14;        /* raised plane */
  --bg-2: #0a0c16;        /* section bands */

  /* ---------- SURFACES (cards / panels) ---------- */
  --surface-1: #0d0f1a;   /* default card */
  --surface-2: #12141f;   /* nested / hovered card */
  --surface-3: #181b28;   /* inputs, wells, code blocks */

  /* ---------- BORDERS ---------- */
  --border:        rgba(255, 255, 255, 0.07);  /* hairline card border */
  --border-strong: rgba(255, 255, 255, 0.14);  /* hovered / focused */
  --border-amber:  rgba(245, 158, 11, 0.40);   /* accented card edge */

  /* ---------- TEXT ---------- */
  --fg:        #f9fafb;   /* near-white headings/body */
  --fg-dim:    #c7cad3;   /* secondary body */
  --fg-muted:  #6b7280;   /* captions, labels, meta */
  --fg-faint:  #41454f;   /* disabled / decorative */
  --fg-on-accent: #05060f;/* text sitting on amber/green fills */

  /* ---------- PRIMARY · AMBER (signal / CTA) ---------- */
  --amber-50:  #fef3c7;
  --amber-300: #fcd34d;
  --amber:     #f59e0b;   /* PRIMARY ACCENT */
  --amber-600: #d97706;
  --amber-700: #b45309;

  /* ---------- SECONDARY · ELECTRIC BLUE ---------- */
  --blue-300:  #93c5fd;
  --blue:      #3b82f6;
  --blue-600:  #2563eb;

  /* ---------- SIGNAL · GREEN (live / operational) ---------- */
  --green-300: #86efac;
  --green:     #22c55e;
  --green-600: #16a34a;

  /* ---------- ACCENT · PURPLE (pills / badges) ---------- */
  --purple-300:#c4b5fd;
  --purple:    #8b5cf6;
  --purple-600:#7c3aed;

  /* ---------- STATUS ALIASES ---------- */
  --live:     var(--green);
  --info:     var(--blue);
  --warn:     var(--amber);
  --danger:   #ef4444;

  /* ---------- GLOWS (space-grade luminance) ---------- */
  --glow-amber:  0 0 0 1px rgba(245,158,11,.25), 0 8px 40px -8px rgba(245,158,11,.45);
  --glow-blue:   0 0 0 1px rgba(59,130,246,.25), 0 8px 40px -8px rgba(59,130,246,.45);
  --glow-green:  0 0 12px -2px rgba(34,197,94,.65);
  --glow-purple: 0 0 0 1px rgba(139,92,246,.25), 0 8px 40px -8px rgba(139,92,246,.40);

  /* ---------- ELEVATION (shadows on black) ---------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.6);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,.7);
  --shadow-lg: 0 24px 64px -16px rgba(0,0,0,.85);

  /* ---------- RADII ---------- */
  --r-sm:   8px;
  --r-card: 12px;   /* cards / panels */
  --r-lg:   20px;   /* hero panels */
  --r-pill: 999px;  /* pills / chips / round buttons */

  /* ---------- SPACING (8pt base) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* telemetry / labels */

  /* ---------- TYPE SCALE (px @ 1920 canvas; rem-scalable) ---------- */
  --t-display: 80px;  /* hero one-liner */
  --t-h1:      56px;
  --t-h2:      40px;
  --t-h3:      28px;
  --t-h4:      20px;
  --t-body-lg: 19px;
  --t-body:    16px;
  --t-small:   14px;
  --t-caption: 13px;
  --t-mono-label: 12px; /* uppercase tracked labels */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.6;

  --tracking-label: 0.14em; /* uppercase eyebrow tracking */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Use these classes (or copy the rules) for consistent text.
   ============================================================ */

.felix-display {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: var(--fg);
}

.felix-h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: -0.025em;
  color: var(--fg);
}

.felix-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  color: var(--fg);
}

.felix-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--fg);
}

.felix-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: 1.3;
  color: var(--fg);
}

.felix-body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-dim);
}

.felix-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-dim);
}

.felix-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--fg-muted);
}

/* Uppercase tracked eyebrow / telemetry label — a core motif */
.felix-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-mono-label);
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.felix-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--fg-dim);
}

/* Amber gradient text for hero emphasis words */
.felix-text-amber {
  background: linear-gradient(180deg, var(--amber-300), var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--amber);
}