/* ============================================================
   QUBITECH — COLORS & TYPE
   Source: Qubitech Brand Guidelines (2026)
   ============================================================ */

/* Webfont: Inter is a cross-platform stand-in for Segoe UI.
   The brand spec is Segoe UI / Helvetica Neue — Inter matches
   the geometric-humanist proportions closely and loads reliably. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ------------------------------------------------------------
     CORE BRAND PALETTE  (from brand guidelines, slide 06)
     ------------------------------------------------------------ */
  --qt-quantum-violet:   #6D28D9;   /* Primary brand — logos, headers, CTAs */
  --qt-deep-space:       #0F0A1F;   /* Dark backgrounds, premium surfaces */
  --qt-twilight-violet:  #4C1D95;   /* Secondary dark, hover on violet */
  --qt-lavender-glow:    #A78BFA;   /* Accent on dark BGs, highlights */
  --qt-frost-lilac:      #EDE9FE;   /* Light tinted backgrounds, cards */
  --qt-signal-teal:      #14B8A6;   /* Complementary accent, data-viz */

  /* Extended neutrals (for body UI, borrowed from quantum-violet's
     ladder so everything stays in-family) */
  --qt-white:            #FFFFFF;
  --qt-ink-950:          #0F0A1F;   /* deep-space alias */
  --qt-ink-900:          #1A1230;
  --qt-ink-800:          #2A1F47;
  --qt-ink-700:          #3B2F5E;
  --qt-ink-500:          #6B5F8A;
  --qt-ink-400:          #8B82A8;
  --qt-ink-300:          #B8B0CC;
  --qt-ink-200:          #D8D2E5;
  --qt-ink-100:          #ECE8F2;
  --qt-ink-50:           #F6F4FA;

  /* Violet scale (for tints/shades of the primary) */
  --qt-violet-50:        #F5F3FF;
  --qt-violet-100:       #EDE9FE;   /* = frost-lilac */
  --qt-violet-200:       #DDD6FE;
  --qt-violet-300:       #C4B5FD;
  --qt-violet-400:       #A78BFA;   /* = lavender-glow */
  --qt-violet-500:       #8B5CF6;
  --qt-violet-600:       #6D28D9;   /* = quantum-violet */
  --qt-violet-700:       #5B21B6;
  --qt-violet-800:       #4C1D95;   /* = twilight-violet */
  --qt-violet-900:       #2E1065;

  /* Teal scale */
  --qt-teal-400:         #2DD4BF;
  --qt-teal-500:         #14B8A6;   /* = signal-teal */
  --qt-teal-600:         #0D9488;

  /* Semantic status (derived in-family) */
  --qt-success:          #14B8A6;   /* teal — on-brand */
  --qt-warning:          #F59E0B;
  --qt-danger:           #EF4444;
  --qt-info:             #A78BFA;

  /* ------------------------------------------------------------
     SEMANTIC TOKENS — LIGHT (default)
     ------------------------------------------------------------ */
  --qt-bg:               var(--qt-white);
  --qt-bg-muted:         var(--qt-ink-50);
  --qt-bg-tint:          var(--qt-frost-lilac);     /* violet-tinted surface */
  --qt-bg-inverse:       var(--qt-deep-space);

  --qt-surface:          var(--qt-white);
  --qt-surface-raised:   var(--qt-white);
  --qt-surface-sunken:   var(--qt-ink-50);

  --qt-fg:               var(--qt-deep-space);      /* primary text */
  --qt-fg-muted:         var(--qt-ink-500);         /* secondary text */
  --qt-fg-subtle:        var(--qt-ink-400);         /* tertiary / meta */
  --qt-fg-inverse:       var(--qt-white);
  --qt-fg-brand:         var(--qt-quantum-violet);

  --qt-border:           var(--qt-ink-200);
  --qt-border-strong:    var(--qt-ink-300);
  --qt-border-brand:     var(--qt-quantum-violet);

  --qt-link:             var(--qt-quantum-violet);
  --qt-link-hover:       var(--qt-twilight-violet);

  /* ------------------------------------------------------------
     SPACING — 4px base grid
     ------------------------------------------------------------ */
  --qt-space-0:   0;
  --qt-space-1:   4px;
  --qt-space-2:   8px;
  --qt-space-3:   12px;
  --qt-space-4:   16px;
  --qt-space-5:   20px;
  --qt-space-6:   24px;
  --qt-space-8:   32px;
  --qt-space-10:  40px;
  --qt-space-12:  48px;
  --qt-space-16:  64px;
  --qt-space-20:  80px;
  --qt-space-24:  96px;

  /* ------------------------------------------------------------
     RADII — matches the logo's 32px on 280px ratio (≈11%).
     Kept restrained; the brand leans geometric not pill.
     ------------------------------------------------------------ */
  --qt-radius-none:   0;
  --qt-radius-xs:     2px;
  --qt-radius-sm:     4px;
  --qt-radius-md:     8px;
  --qt-radius-lg:     12px;
  --qt-radius-xl:     16px;
  --qt-radius-2xl:    24px;
  --qt-radius-pill:   9999px;

  /* ------------------------------------------------------------
     SHADOWS — soft violet-tinted elevation
     (not harsh black — keeps the "premium / optical" feel)
     ------------------------------------------------------------ */
  --qt-shadow-xs: 0 1px 2px 0 rgba(15, 10, 31, 0.06);
  --qt-shadow-sm: 0 2px 4px -1px rgba(15, 10, 31, 0.08), 0 1px 2px -1px rgba(15, 10, 31, 0.04);
  --qt-shadow-md: 0 6px 16px -4px rgba(76, 29, 149, 0.12), 0 2px 4px -2px rgba(15, 10, 31, 0.06);
  --qt-shadow-lg: 0 18px 36px -12px rgba(76, 29, 149, 0.22), 0 4px 8px -4px rgba(15, 10, 31, 0.08);
  --qt-shadow-xl: 0 32px 64px -20px rgba(76, 29, 149, 0.30), 0 8px 16px -8px rgba(15, 10, 31, 0.10);
  --qt-shadow-glow: 0 0 0 4px rgba(109, 40, 217, 0.18);  /* focus ring */
  --qt-shadow-inset: inset 0 1px 2px 0 rgba(15, 10, 31, 0.06);

  /* ------------------------------------------------------------
     TYPE — family tokens
     Primary stack keeps Segoe UI first (Windows native), then
     the Inter webfont, then Helvetica Neue per brand spec.
     ------------------------------------------------------------ */
  --qt-font-sans: "Inter", "Segoe UI", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --qt-font-mono: "JetBrains Mono", "SF Mono", "Consolas", "Liberation Mono", monospace;
  --qt-font-display: "Space Grotesk", "Inter", "Segoe UI", "Helvetica Neue", sans-serif;  /* offbeat geometric grotesk for headlines + wordmark */

  /* Type scale — 1920×1080 friendly; also works in print (pt ≈ px * 0.75) */
  --qt-text-xs:   12px;
  --qt-text-sm:   14px;
  --qt-text-base: 16px;
  --qt-text-md:   18px;
  --qt-text-lg:   20px;
  --qt-text-xl:   24px;
  --qt-text-2xl:  30px;
  --qt-text-3xl:  36px;
  --qt-text-4xl:  48px;
  --qt-text-5xl:  64px;
  --qt-text-6xl:  80px;
  --qt-text-display: 112px;   /* logo-scale hero */

  --qt-lh-tight:   1.1;
  --qt-lh-snug:    1.25;
  --qt-lh-normal:  1.5;
  --qt-lh-relaxed: 1.7;

  --qt-tracking-tight:  -0.02em;
  --qt-tracking-normal:  0;
  --qt-tracking-wide:    0.08em;    /* section labels */
  --qt-tracking-wider:   0.18em;    /* all-caps eyebrows — used heavily in brand */
  --qt-tracking-logo:    0.24em;    /* matches letter-spacing="8" on logo */

  --qt-weight-regular:  400;
  --qt-weight-medium:   500;
  --qt-weight-semibold: 600;
  --qt-weight-bold:     700;
  --qt-weight-black:    800;

  /* ------------------------------------------------------------
     MOTION
     ------------------------------------------------------------ */
  --qt-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --qt-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --qt-duration-fast:   120ms;
  --qt-duration-base:   200ms;
  --qt-duration-slow:   320ms;
}

/* ============================================================
   DARK SURFACE OVERRIDE
   Apply to any element to flip to the "Deep Space" palette —
   used on title slides, hero sections, logo shots.
   ============================================================ */
[data-qt-surface="dark"] {
  --qt-bg:             var(--qt-deep-space);
  --qt-bg-muted:       var(--qt-ink-900);
  --qt-bg-tint:        var(--qt-ink-800);
  --qt-surface:        var(--qt-ink-900);
  --qt-surface-raised: var(--qt-ink-800);
  --qt-surface-sunken: var(--qt-deep-space);
  --qt-fg:             var(--qt-white);
  --qt-fg-muted:       var(--qt-ink-300);
  --qt-fg-subtle:      var(--qt-ink-400);
  --qt-fg-inverse:     var(--qt-deep-space);
  --qt-fg-brand:       var(--qt-lavender-glow);
  --qt-border:         rgba(255, 255, 255, 0.10);
  --qt-border-strong:  rgba(255, 255, 255, 0.20);
  --qt-link:           var(--qt-lavender-glow);
  --qt-link-hover:     var(--qt-violet-300);
  color-scheme: dark;
}

/* ============================================================
   BASE ELEMENTS (semantic, drop-in)
   Opt in by wrapping with .qt or applying to html/body.
   ============================================================ */
.qt, .qt * { box-sizing: border-box; }

.qt {
  font-family: var(--qt-font-sans);
  font-size: var(--qt-text-base);
  line-height: var(--qt-lh-normal);
  color: var(--qt-fg);
  background: var(--qt-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";  /* Inter stylistic */
}

.qt h1, .qt .qt-h1 {
  font-family: var(--qt-font-display);
  font-size: var(--qt-text-5xl);
  font-weight: var(--qt-weight-black);
  line-height: var(--qt-lh-tight);
  letter-spacing: var(--qt-tracking-tight);
  color: var(--qt-fg);
  margin: 0 0 var(--qt-space-4) 0;
}
.qt h2, .qt .qt-h2 {
  font-size: var(--qt-text-3xl);
  font-weight: var(--qt-weight-bold);
  line-height: var(--qt-lh-snug);
  letter-spacing: var(--qt-tracking-tight);
  margin: 0 0 var(--qt-space-3) 0;
}
.qt h3, .qt .qt-h3 {
  font-size: var(--qt-text-xl);
  font-weight: var(--qt-weight-semibold);
  line-height: var(--qt-lh-snug);
  margin: 0 0 var(--qt-space-2) 0;
}
.qt h4, .qt .qt-h4 {
  font-size: var(--qt-text-md);
  font-weight: var(--qt-weight-semibold);
  line-height: var(--qt-lh-snug);
  margin: 0 0 var(--qt-space-2) 0;
}

.qt p, .qt .qt-body {
  font-size: var(--qt-text-base);
  line-height: var(--qt-lh-normal);
  color: var(--qt-fg);
  margin: 0 0 var(--qt-space-4) 0;
  text-wrap: pretty;
}
.qt .qt-body-lg { font-size: var(--qt-text-md); line-height: var(--qt-lh-relaxed); }
.qt .qt-caption, .qt small {
  font-size: var(--qt-text-xs);
  color: var(--qt-fg-muted);
  line-height: var(--qt-lh-snug);
}

/* Eyebrow — the signature all-caps tracked label used across
   brand deck (e.g. "BRAND OVERVIEW", "LOGO USAGE") */
.qt-eyebrow {
  font-size: var(--qt-text-xs);
  font-weight: var(--qt-weight-semibold);
  letter-spacing: var(--qt-tracking-wider);
  text-transform: uppercase;
  color: var(--qt-fg-brand);
}

/* Display — massive hero headline, the "The Quantum Advantage,
   Delivered." treatment */
.qt-display {
  font-family: var(--qt-font-display);
  font-size: clamp(56px, 8vw, var(--qt-text-display));
  font-weight: var(--qt-weight-black);
  line-height: 0.98;
  letter-spacing: var(--qt-tracking-tight);
  color: var(--qt-fg);
}

/* Logo wordmark — tracked like the mark itself */
.qt-wordmark {
  font-family: var(--qt-font-display);
  font-weight: var(--qt-weight-black);
  letter-spacing: var(--qt-tracking-logo);
  text-transform: uppercase;
}

.qt code, .qt .qt-mono {
  font-family: var(--qt-font-mono);
  font-size: 0.92em;
  background: var(--qt-bg-muted);
  padding: 2px 6px;
  border-radius: var(--qt-radius-sm);
}

.qt a { color: var(--qt-link); text-decoration: none; border-bottom: 1px solid currentColor; }
.qt a:hover { color: var(--qt-link-hover); }

/* Shared utility: subtle violet-to-deep-space gradient used on
   brand title blocks — NOT a rainbow or saturated hero wash */
.qt-gradient-violet {
  background: linear-gradient(135deg, var(--qt-deep-space) 0%, var(--qt-violet-900) 48%, var(--qt-twilight-violet) 100%);
}
.qt-gradient-dawn {
  background: linear-gradient(180deg, var(--qt-deep-space) 0%, var(--qt-violet-800) 100%);
}