/* QuanXAI Design System — Colors & Typography Foundations */

/* ─── Self-hosted Montserrat (brand font) ──────────────────────
   Montserrat Light (300) is the default weight EVERYWHERE in the system.
   Montserrat Black (900) is available for rare display emphasis.
   Both are self-hosted from /fonts. No other weights load — the brand
   reads light, airy and editorial.
   ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Montserrat-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/Montserrat-Black.ttf') format('truetype');
}

:root {
  /* ───────────────────────────────────────────────────────────────
     COLORS — base palette
     QuanXAI is a black + purple brand. The signature is a tri-stop
     gradient (electric blue → violet → magenta) used sparingly on
     the "X", on key CTAs, on icons, and on the 3D torus hero asset.
     ─────────────────────────────────────────────────────────────── */

  /* Surfaces — near-blacks with a faint purple-cool cast */
  --qx-black:        #050208;
  --qx-ink-900:      #0A0612;
  --qx-ink-800:      #11091C;
  --qx-ink-700:      #1A1029;
  --qx-ink-600:      #261738;
  --qx-ink-500:      #3A2453;

  /* Foregrounds on dark */
  --qx-fg-1:         #FFFFFF;
  --qx-fg-2:         #E6DDF5;
  --qx-fg-3:         #A99CC4;
  --qx-fg-4:         #6B5E85;
  --qx-fg-5:         #3F3553;

  /* Light surfaces (inverted) */
  --qx-paper:        #FFFFFF;
  --qx-paper-2:      #F7F4FB;
  --qx-paper-3:      #ECE6F5;
  --qx-paper-border: #DDD2EC;
  --qx-on-paper-1:   #0A0612;
  --qx-on-paper-2:   #2B1F44;
  --qx-on-paper-3:   #5E4F7D;

  /* Brand accents */
  --qx-blue:         #2A5BFF;
  --qx-indigo:       #5B3BFF;
  --qx-violet:       #8B4FFF;
  --qx-purple:       #B948FF;
  --qx-magenta:      #D845F0;
  --qx-pink:         #F25FE3;

  --qx-accent:       #B948FF;
  --qx-accent-soft:  rgba(185, 72, 255, 0.16);
  --qx-accent-glow:  rgba(185, 72, 255, 0.45);

  --qx-success:      #3CE6A5;
  --qx-warning:      #FFC15A;
  --qx-danger:       #FF5C7A;
  --qx-info:         #5BA8FF;

  --qx-gradient-x:        linear-gradient(135deg, #2A5BFF 0%, #8B4FFF 45%, #D845F0 100%);
  --qx-gradient-x-vert:   linear-gradient(180deg, #F25FE3 0%, #B948FF 50%, #2A5BFF 100%);
  --qx-gradient-soft:     linear-gradient(135deg, rgba(42,91,255,0.18), rgba(216,69,240,0.18));
  --qx-gradient-rim:      linear-gradient(135deg, rgba(91,59,255,0.4), rgba(216,69,240,0.0) 60%);
  --qx-gradient-text:     linear-gradient(92deg, #5B3BFF 0%, #B948FF 50%, #F25FE3 100%);
  --qx-gradient-bg-hero:  radial-gradient(120% 80% at 50% 0%, rgba(91,59,255,0.18) 0%, rgba(5,2,8,0) 60%);

  /* ───────────────────────────────────────────────────────────────
     TYPOGRAPHY — Montserrat Light only
     The brand reads light, airy, editorial. Contrast comes from
     SIZE, COLOR and SPACING — never weight. Weight 300 is the
     default for body, headlines, buttons, and eyebrows. Weight 900
     exists only for the rare mega-flourish (e.g. footer wordmark).
     ─────────────────────────────────────────────────────────────── */

  --qx-font-sans:    'Montserrat', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --qx-font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  --qx-weight-light:   300;   /* default everywhere */
  --qx-weight-regular: 300;
  --qx-weight-medium:  300;
  --qx-weight-semi:    300;
  --qx-weight-bold:    300;
  --qx-weight-black:   900;   /* mega-flourish only */

  /* Type scale */
  --qx-fs-display-xl: clamp(64px, 9vw, 160px);
  --qx-fs-display-l:  clamp(48px, 6.5vw, 112px);
  --qx-fs-display-m:  clamp(40px, 5vw, 80px);
  --qx-fs-h1:         clamp(36px, 4vw, 64px);
  --qx-fs-h2:         clamp(28px, 3vw, 44px);
  --qx-fs-h3:         28px;
  --qx-fs-h4:         22px;
  --qx-fs-h5:         18px;
  --qx-fs-body-lg:    18px;
  --qx-fs-body:       15px;
  --qx-fs-body-sm:    13px;
  --qx-fs-eyebrow:    12px;
  --qx-fs-caption:    11px;

  --qx-lh-tight:    0.95;
  --qx-lh-display:  1.02;
  --qx-lh-heading:  1.1;
  --qx-lh-body:     1.55;
  --qx-lh-loose:    1.75;

  --qx-ls-mega:      -0.04em;
  --qx-ls-display:   -0.02em;
  --qx-ls-heading:   -0.01em;
  --qx-ls-body:      0;
  --qx-ls-eyebrow:   0.22em;
  --qx-ls-button:    0.04em;

  --qx-space-1:  4px;
  --qx-space-2:  8px;
  --qx-space-3:  12px;
  --qx-space-4:  16px;
  --qx-space-5:  24px;
  --qx-space-6:  32px;
  --qx-space-7:  48px;
  --qx-space-8:  64px;
  --qx-space-9:  96px;
  --qx-space-10: 128px;

  --qx-radius-xs: 4px;
  --qx-radius-sm: 8px;
  --qx-radius-md: 12px;
  --qx-radius-lg: 20px;
  --qx-radius-xl: 28px;
  --qx-radius-2xl: 40px;
  --qx-radius-pill: 999px;

  --qx-border-1: 1px solid rgba(255,255,255,0.06);
  --qx-border-2: 1px solid rgba(255,255,255,0.10);
  --qx-border-3: 1px solid rgba(255,255,255,0.16);
  --qx-border-glow: 1px solid rgba(185,72,255,0.35);

  --qx-shadow-sm:  0 2px 8px rgba(0,0,0,0.35);
  --qx-shadow-md:  0 10px 30px rgba(0,0,0,0.45);
  --qx-shadow-lg:  0 30px 80px rgba(0,0,0,0.55);
  --qx-shadow-glow: 0 0 0 1px rgba(185,72,255,0.25), 0 20px 60px rgba(91,59,255,0.35);
  --qx-shadow-inner: inset 0 1px 0 rgba(255,255,255,0.06);

  --qx-blur-sm: 8px;
  --qx-blur-md: 20px;
  --qx-blur-lg: 40px;

  --qx-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --qx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --qx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --qx-dur-fast:   180ms;
  --qx-dur-base:   320ms;
  --qx-dur-slow:   600ms;
  --qx-dur-cinematic: 1200ms;
}

/* ─── GLOBAL DEFAULTS — apply Montserrat Light everywhere ───────
   Any element without an explicit font-family/weight inherits 300.
   Bold/strong tags also stay at 300 — the brand never uses weight
   to create emphasis. Use color, size or letter-spacing instead.
   ─────────────────────────────────────────────────────────────── */

html, body, button, input, textarea, select {
  font-family: 'Montserrat', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  font-weight: 300;
}

b, strong, h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}

/* ─── Semantic type styles ─────────────────────────────────────── */

.qx-base {
  font-family: var(--qx-font-sans);
  font-weight: 300;
  color: var(--qx-fg-1);
  background: var(--qx-black);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.qx-display-xl, .qx-display-l, .qx-display-m,
.qx-h1, .qx-h2, .qx-h3, .qx-h4, .qx-h5,
.qx-body-lg, .qx-body, .qx-body-sm,
.qx-eyebrow, .qx-caption {
  font-family: var(--qx-font-sans);
  font-weight: 300;
}

.qx-display-xl { font-size: var(--qx-fs-display-xl); line-height: var(--qx-lh-tight);   letter-spacing: var(--qx-ls-mega); }
.qx-display-l  { font-size: var(--qx-fs-display-l);  line-height: var(--qx-lh-display); letter-spacing: var(--qx-ls-display); }
.qx-display-m  { font-size: var(--qx-fs-display-m);  line-height: var(--qx-lh-display); letter-spacing: var(--qx-ls-display); }
.qx-h1         { font-size: var(--qx-fs-h1); line-height: var(--qx-lh-heading); letter-spacing: var(--qx-ls-heading); }
.qx-h2         { font-size: var(--qx-fs-h2); line-height: var(--qx-lh-heading); letter-spacing: var(--qx-ls-heading); }
.qx-h3         { font-size: var(--qx-fs-h3); line-height: var(--qx-lh-heading); }
.qx-h4         { font-size: var(--qx-fs-h4); line-height: 1.25; }
.qx-h5         { font-size: var(--qx-fs-h5); line-height: 1.3; }
.qx-body-lg    { font-size: var(--qx-fs-body-lg); line-height: var(--qx-lh-body); color: var(--qx-fg-2); }
.qx-body       { font-size: var(--qx-fs-body);    line-height: var(--qx-lh-body); color: var(--qx-fg-2); }
.qx-body-sm    { font-size: var(--qx-fs-body-sm); line-height: var(--qx-lh-body); color: var(--qx-fg-3); }
.qx-eyebrow    { font-size: var(--qx-fs-eyebrow); letter-spacing: var(--qx-ls-eyebrow); text-transform: uppercase; color: var(--qx-fg-3); }
.qx-caption    { font-size: var(--qx-fs-caption); letter-spacing: 0.04em; color: var(--qx-fg-4); }

.qx-mono { font-family: var(--qx-font-mono); font-size: 13px; letter-spacing: 0; }

.qx-gradient-text {
  background: var(--qx-gradient-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}