/* =============================================================
   LuxApps Design System — Foundations
   Source of truth for colors, type, spacing, radii, shadows.
   Extracted from the production site css/site.css.
   Import this file first in any LuxApps prototype.
   ============================================================= */

@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 {
  /* ============ BRAND COLORS ============ */
  /* Navy — primary. Used for titles, branding, deep backgrounds. */
  --lux-navy:        #232066;
  --lux-navy-deep:   #161434;   /* Hero / footer / dark sections */
  --lux-navy-700:    #1B194D;
  --lux-navy-600:    #2A2778;   /* Hover navy */
  --lux-navy-500:    #3A368E;
  --lux-navy-400:    #5E5AB0;
  --lux-navy-200:    #C9C8E0;
  --lux-navy-100:    #E6E5F0;
  --lux-navy-050:    #F2F1F8;   /* Very light navy wash */

  /* Teal — accent. Used for CTA, highlights, focus rings. */
  --lux-teal:        #2EB8C9;
  --lux-teal-700:    #1F8A98;   /* Accent text, link hover */
  --lux-teal-600:    #25A0B0;   /* CTA hover */
  --lux-teal-500:    #2EB8C9;
  --lux-teal-300:    #7BD2DD;   /* Accents on dark surfaces */
  --lux-teal-200:    #B5E6EC;
  --lux-teal-100:    #DEF3F6;
  --lux-teal-050:    #ECF8FA;

  /* Signature gradient (AI Studio + final CTA + page-hero halos) */
  --lux-gradient:      linear-gradient(135deg, #161434 0%, #232066 35%, #2E5B96 72%, #2EB8C9 100%);
  --lux-gradient-soft: linear-gradient(135deg, #F2F1F8 0%, #ECF8FA 100%);

  /* ============ NEUTRALS (ink scale) ============ */
  --ink-900:  #0F1226;
  --ink-800:  #1C2040;
  --ink-700:  #2E3358;
  --ink-600:  #4A5072;
  --ink-500:  #6B7191;   /* Caption / muted text */
  --ink-400:  #9097B2;
  --ink-300:  #B7BCD0;
  --ink-200:  #D7DAE5;
  --ink-150:  #E3E5ED;   /* Default border */
  --ink-100:  #ECEEF4;
  --ink-050:  #F5F6FA;
  --ink-025:  #FAFBFD;
  --paper:    #FFFFFF;

  /* ============ SURFACES ============ */
  --bg-page:        #FFFFFF;
  --bg-soft:        #F7F8FB;
  --bg-deep:        var(--lux-navy-deep);
  --border-default: var(--ink-150);
  --border-strong:  var(--ink-200);

  /* ============ SEMANTIC ============ */
  --success: #00A095;
  --warning: #C97A1F;
  --danger:  #C73A2D;

  /* ============ TYPE STACK ============ */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;

  /* Type scale — marketing site (larger than the CRM scale) */
  --fs-display-xl: clamp(48px, 6.4vw, 80px);   /* Homepage hero */
  --fs-display-l:  clamp(36px, 4.4vw, 56px);   /* Page H1, major H2 */
  --fs-display-m:  clamp(28px, 3.2vw, 40px);   /* Standard H2 */
  --fs-h1:         32px;
  --fs-h2:         24px;
  --fs-h3:         20px;
  --fs-body-l:     18px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-overline:   13px;
  --fs-tag:        12px;

  --lh-tight:   1.08;   /* display-xl */
  --lh-snug:    1.22;   /* display-l / m */
  --lh-normal:  1.5;    /* body */
  --lh-relaxed: 1.65;   /* lead */

  /* Letter-spacing for display sizes (Inter at scale benefits from tightening) */
  --ls-display-xl: -0.022em;
  --ls-display-l:  -0.018em;
  --ls-display-m:  -0.012em;

  /* ============ RADII ============ */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* ============ SPACING ============ */
  --sp-1:    4px;
  --sp-2:    8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-7:   32px;
  --sp-8:   40px;
  --sp-9:   56px;
  --sp-10:  72px;
  --sp-11:  96px;
  --sp-12: 128px;

  /* ============ ELEVATION ============ */
  --shadow-xs:   0 1px 0 rgba(15,18,38,0.04);
  --shadow-sm:   0 1px 2px rgba(15,18,38,0.06), 0 1px 1px rgba(15,18,38,0.04);
  --shadow-md:   0 8px 24px rgba(15,18,38,0.06), 0 2px 4px rgba(15,18,38,0.04);
  --shadow-lg:   0 24px 60px rgba(15,18,38,0.10), 0 4px 12px rgba(15,18,38,0.06);
  --shadow-card: 0 1px 2px rgba(15,18,38,0.04), 0 12px 30px -16px rgba(35,32,102,0.16);
  /* Signature teal glow under primary CTAs */
  --shadow-teal: 0 1px 0 rgba(15,18,38,0.06), 0 8px 20px -8px rgba(46,184,201,0.4);

  /* ============ LAYOUT ============ */
  --maxw:      1240px;
  --gutter:    clamp(20px, 4vw, 40px);
  --section-y: clamp(64px, 8vw, 112px);

  /* ============ MOTION ============ */
  --easing:        cubic-bezier(.2,.8,.2,1);
  --dur-fast:      160ms;
  --dur-base:      220ms;
  --dur-slow:      600ms;
  --dur-counter:  1400ms;

  /* Signature pattern intensity */
  --pixel-intensity: 0.5;
}

/* =============================================================
   SEMANTIC TYPOGRAPHY
   Drop these classes on any element to inherit the canonical
   marketing type styles.
   ============================================================= */

.display-xl {
  font-family: var(--font-sans);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: var(--ls-display-xl);
  color: var(--lux-navy);
  margin: 0;
}
.display-l {
  font-family: var(--font-sans);
  font-size: var(--fs-display-l);
  line-height: var(--lh-snug);
  font-weight: 700;
  letter-spacing: var(--ls-display-l);
  color: var(--lux-navy);
  margin: 0;
}
.display-m {
  font-family: var(--font-sans);
  font-size: var(--fs-display-m);
  line-height: var(--lh-snug);
  font-weight: 700;
  letter-spacing: var(--ls-display-m);
  color: var(--lux-navy);
  margin: 0;
}

h1, .h1 { font-family: var(--font-sans); font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-snug); color: var(--lux-navy); margin: 0; }
h2, .h2 { font-family: var(--font-sans); font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-snug); color: var(--lux-navy); margin: 0; }
h3, .h3 { font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-normal); color: var(--lux-navy); margin: 0; }

.lead {
  font-size: var(--fs-body-l);
  line-height: var(--lh-relaxed);
  color: var(--ink-600);
  margin: 0;
  max-width: 56ch;
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--ink-700);
  margin: 0;
}

.small  { font-size: var(--fs-small);  color: var(--ink-500); }
.muted  { color: var(--ink-500); }
.mono   { font-family: var(--font-mono); }

/* Eyebrow — small uppercase teal label with horizontal bar.
   Signature LuxApps section opener. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lux-teal-700);
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

/* Navy → teal gradient text — used in display headings to accent a phrase. */
.h-accent {
  background: linear-gradient(95deg, var(--lux-navy) 0%, var(--lux-teal) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
/* On dark sections, the accent flips to white → teal-300 */
.section--dark .h-accent,
.hero--dark .h-accent {
  background: linear-gradient(95deg, #FFFFFF 0%, #7BD2DD 60%, #2EB8C9 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Code / inline mono token */
code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--lux-navy-050);
  color: var(--lux-navy);
  padding: 2px 6px;
  border-radius: var(--r-xs);
}

/* Tag / mono pill — used for badges, technical labels (e.g. luxgap-tag) */
.tag-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--lux-navy-050);
  color: var(--lux-navy);
  padding: 3px 8px;
  border-radius: var(--r-xs);
  font-weight: 500;
}