/* ==========================================================================
   GX Capital — Colors & Typography Tokens
   Source: gx-capital-nexus-ai (src/index.css, tailwind.config.ts)
   Aesthetic: brutalist financial — deep navy + champagne gold, sharp 0px corners,
   hard offset shadows, uppercase tracking-widest labels.
   ========================================================================== */

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

:root {
  /* Font families */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-display: 'Inter', system-ui, sans-serif; /* same family, weight 900 */

  /* Type scale (px-based for predictability in brutalist headers) */
  --fs-xs: 10px;       /* metadata, watermark labels */
  --fs-sm: 12px;       /* eyebrows, table heads */
  --fs-base: 14px;     /* body */
  --fs-md: 16px;       /* body large */
  --fs-lg: 20px;       /* sub-headers */
  --fs-xl: 24px;       /* card titles */
  --fs-2xl: 32px;      /* page titles small */
  --fs-3xl: 48px;      /* hero md */
  --fs-4xl: 64px;      /* hero lg */
  --fs-5xl: 96px;      /* hero xl, brutalist watermark */
  --fs-6xl: 128px;     /* mega watermark */

  /* Weights — used heavily: 900 for headlines, 700 for labels */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* Letter spacing — uppercase eyebrows use tracking-widest (~0.1em) */
  --ls-tighter: -0.04em;   /* hero headlines */
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.025em;
  --ls-wider: 0.05em;
  --ls-widest: 0.1em;      /* uppercase eyebrows / labels */

  /* Line heights */
  --lh-none: 1;            /* hero */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.625;

  /* ---------- Brand colors (HSL → hex preview as comments) ---------------- */
  /* Primary (deep navy) */
  --gx-primary: #0c3163;          /* hsl(208 66% 20%) */
  --gx-primary-dark: #000d23;     /* hsl(208 100% 7%) */
  --gx-primary-light: #1f5694;    /* lighter step for hover */

  /* Secondary (champagne / gold) */
  --gx-secondary-light: #dbc7a2;  /* hsl(40 44% 87%) — soft champagne */
  --gx-secondary-dark: #87704a;   /* hsl(40 25% 48%) — antique gold */
  --gx-gold: #c9a96a;             /* logo-accurate gold mid */

  /* Neutrals */
  --gx-bg: #ffffff;
  --gx-bg-muted: #f5f3ee;        /* champagne-tinted muted */
  --gx-fg: #000d23;              /* near-black navy */
  --gx-fg-muted: #5a6a80;        /* hsl(208 20% 40%) */
  --gx-border: #d3d9e0;          /* hsl(208 20% 85%) */
  --gx-border-strong: #0c3163;

  /* Semantic */
  --gx-success: #16a34a;
  --gx-warning: #d97706;
  --gx-danger:  #dc2626;
  --gx-info:    #0c3163;

  /* Foregrounds (paired) */
  --fg-on-primary: #dbc7a2;       /* champagne on navy */
  --fg-on-secondary: #0c3163;     /* navy on champagne */
  --fg-on-dark: #ffffff;
  --fg-on-light: #000d23;

  /* ---------- Foreground / surface aliases (semantic) -------------------- */
  --fg1: var(--gx-fg);            /* primary text */
  --fg2: var(--gx-fg-muted);      /* secondary text */
  --fg3: #94a3b8;                 /* tertiary / disabled */
  --bg1: var(--gx-bg);
  --bg2: var(--gx-bg-muted);
  --bg3: #ebe6dc;                 /* deeper champagne neutral */
  --bg-dark: var(--gx-primary-dark);
  --bg-navy: var(--gx-primary);

  /* ---------- Gradients --------------------------------------------------- */
  --gradient-primary: linear-gradient(135deg, var(--gx-primary), var(--gx-primary-dark));
  --gradient-secondary: linear-gradient(135deg, var(--gx-secondary-light), var(--gx-secondary-dark));
  --gradient-hero: linear-gradient(180deg, var(--gx-primary) 0%, var(--gx-primary-dark) 100%);
  --gradient-gold-stripe: linear-gradient(90deg, transparent 0%, var(--gx-secondary-dark) 50%, transparent 100%);

  /* ---------- Shadows (hard offset = brutalist) -------------------------- */
  --shadow-gx:        4px 4px 0 0 rgba(12, 49, 99, 0.2);
  --shadow-card:      2px 2px 0 0 rgba(211, 217, 224, 0.5);
  --shadow-card-hover:6px 6px 0 0 rgba(12, 49, 99, 0.3);
  --shadow-elevated:  8px 8px 0 0 rgba(12, 49, 99, 0.2);
  --shadow-soft: 0 0 0 1px var(--gx-border);
  --shadow-glow: 0 0 20px rgba(12, 49, 99, 0.3);

  /* ---------- Radii — BRUTALIST (sharp) ---------------------------------- */
  --radius-none: 0;
  --radius-sm: 0;
  --radius: 0;            /* default = sharp */
  --radius-md: 0;
  --radius-lg: 0;
  --radius-pill: 9999px;  /* used only for badges/avatars in legacy */

  /* ---------- Spacing (4px base) ----------------------------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- Motion ----------------------------------------------------- */
  --transition-smooth: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast:   all 0.15s ease-out;
  --transition-slow:   all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-spring: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);

  /* ---------- Borders ---------------------------------------------------- */
  --border-width: 1px;
  --border-width-strong: 2px;
  --border-width-heavy: 4px;
}

/* ---------- Semantic typography classes ---------------------------------- */
.gx-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-5xl);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tighter);
  text-transform: uppercase;
}

.gx-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: var(--fs-4xl);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tighter);
  text-transform: uppercase;
}

.gx-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.gx-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.gx-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--gx-secondary-dark);
}

.gx-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg2);
}

.gx-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg1);
}

.gx-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg2);
}

.gx-mono,
.gx-kpi-value,
.gx-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight);
}

.gx-kpi-value {
  font-weight: var(--fw-black);
  font-size: var(--fs-3xl);
  line-height: var(--lh-none);
}