/* =============================================================
   QTG — Quant Technology Group
   Design Tokens · Colors & Typography
   ============================================================= */

/* -------- Brand fonts (self-hosted) ----------------------------
   Inter Tight is the canonical QTG display/body family.
   Variable fonts: one file covers weights 100–900.
   JetBrains Mono from Google Fonts CDN (no branded mono supplied).
   --------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  src: url('fonts/InterTight-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/InterTight-VariableFont_wght.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: italic;
  font-weight: 100 900;
  src: url('fonts/InterTight-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/InterTight-Italic-VariableFont_wght.ttf') format('truetype');
  font-display: swap;
}

:root {
  /* ===========================================================
     COLOR — CORE BRAND
     The teal is the single brand accent. Used as a scalpel.
     =========================================================== */
  --qtg-teal:           #1DE9E0;   /* signature UI teal (screens) */
  --qtg-teal-pure:      #00FFFF;   /* pure brand mark color (logo) */
  --qtg-teal-700:       #0DB8B0;   /* pressed / darker hover */
  --qtg-teal-300:       #7CF3EE;   /* soft tint for subtle states */
  --qtg-teal-100:       rgba(29, 233, 224, 0.12);  /* ghost fill  */

  /* ===========================================================
     COLOR — DARK MODE (signature surface)
     Near-black with cool undertone. #0B0E10 base.
     =========================================================== */
  --d-bg:               #0B0E10;   /* canvas */
  --d-bg-raised:        #11161A;   /* cards, raised surfaces */
  --d-bg-sunken:        #07090B;   /* wells, insets */
  --d-bg-overlay:       rgba(11, 14, 16, 0.72);

  --d-border:           #1F262C;   /* hairline, default */
  --d-border-strong:    #2C353C;   /* pressed / focused border */
  --d-border-faint:     #161B1F;   /* very subtle dividers */

  --d-fg:               #F2F4F5;   /* primary text */
  --d-fg-muted:         #A8B0B5;   /* secondary text */
  --d-fg-dim:           #6B7277;   /* tertiary / captions */
  --d-fg-faint:         #424B51;   /* disabled, meta */

  /* ===========================================================
     COLOR — LIGHT MODE (documentation, marketing interiors)
     Warm paper, near-black ink.
     =========================================================== */
  --l-bg:               #FAFAF7;   /* canvas */
  --l-bg-raised:        #FFFFFF;   /* cards */
  --l-bg-sunken:        #F2F2EE;   /* wells, subtle sections */
  --l-bg-overlay:       rgba(250, 250, 247, 0.82);

  --l-border:           #E4E3DD;   /* hairline, default */
  --l-border-strong:    #C9C7BF;   /* pressed / focused */
  --l-border-faint:     #EFEEE9;   /* faint dividers */

  --l-fg:               #0B0E10;   /* primary ink */
  --l-fg-muted:         #4A5055;   /* secondary */
  --l-fg-dim:           #767B7F;   /* tertiary */
  --l-fg-faint:         #AAB0B3;   /* captions, disabled */

  /* ===========================================================
     COLOR — SEMANTIC (institutional, not Mario-bright)
     Paired tones so they sit correctly on either surface.
     =========================================================== */
  --qtg-success:        #3FB28A;
  --qtg-success-bg:     rgba(63, 178, 138, 0.12);
  --qtg-warning:        #D9A441;
  --qtg-warning-bg:     rgba(217, 164, 65, 0.12);
  --qtg-error:          #D96856;
  --qtg-error-bg:       rgba(217, 104, 86, 0.12);
  --qtg-info:           var(--qtg-teal);
  --qtg-info-bg:        var(--qtg-teal-100);

  /* ===========================================================
     DATA VIZ
     Teal as primary series; grayscale for secondary.
     =========================================================== */
  --chart-1: var(--qtg-teal);
  --chart-2: #A8B0B5;
  --chart-3: #6B7277;
  --chart-4: #424B51;
  --chart-5: #2C353C;
  --chart-up:   var(--qtg-success);
  --chart-down: var(--qtg-error);

  /* ===========================================================
     TYPOGRAPHY — FAMILIES
     Inter Tight is the canonical QTG display/body family.
     JetBrains Mono for monospace micro-labels.
     =========================================================== */
  --font-sans: 'Inter Tight', 'Söhne', 'Aeonik', 'Helvetica Neue',
               -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: 'JetBrains Mono', 'Berkeley Mono', 'IBM Plex Mono',
               ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Features — tabular figures mandatory for data */
  --ff-tabular: 'tnum' 1, 'cv11' 1;
  --ff-mono:    'ss02' 1, 'cv11' 1;

  /* Type scale — tight, structural */
  --fs-display-xl: 88px;    --lh-display-xl: 0.96;  --lt-display-xl: -0.035em;
  --fs-display-l:  64px;    --lh-display-l:  0.98;  --lt-display-l:  -0.03em;
  --fs-display-m:  48px;    --lh-display-m:  1.02;  --lt-display-m:  -0.025em;
  --fs-h1:         36px;    --lh-h1:         1.08;  --lt-h1:         -0.02em;
  --fs-h2:         28px;    --lh-h2:         1.15;  --lt-h2:         -0.015em;
  --fs-h3:         22px;    --lh-h3:         1.25;  --lt-h3:         -0.01em;
  --fs-h4:         18px;    --lh-h4:         1.35;  --lt-h4:         -0.005em;
  --fs-body-l:     17px;    --lh-body-l:     1.55;  --lt-body-l:     0;
  --fs-body:       15px;    --lh-body:       1.55;  --lt-body:       0;
  --fs-body-s:     13px;    --lh-body-s:     1.5;   --lt-body-s:     0;
  --fs-caption:    12px;    --lh-caption:    1.4;   --lt-caption:    0;

  /* Mono — always uppercase, tracked out */
  --fs-mono-l:     13px;
  --fs-mono:       11px;
  --fs-mono-s:     10px;
  --lt-mono:       0.14em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* ===========================================================
     SPACING & LAYOUT
     4px baseline. Small, restrained radii.
     =========================================================== */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  --r-0:   0px;
  --r-sm:  2px;
  --r-md:  4px;
  --r-lg:  6px;
  --r-xl:  8px;
  --r-pill: 999px;      /* use sparingly — chips, toggles only */

  /* Borders — hairline is the default */
  --bw-hair: 1px;
  --bw-reg:  1px;
  --bw-strong: 2px;

  /* Shadows — tight and low-opacity. Borders preferred. */
  --shadow-none: none;
  --shadow-xs:   0 1px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.06),
                 0 0 0 1px rgba(0, 0, 0, 0.03);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08),
                 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.12),
                 0 0 0 1px rgba(0, 0, 0, 0.04);

  /* Dark-mode shadows sit deeper */
  --shadow-d-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-d-md: 0 6px 20px rgba(0, 0, 0, 0.5);

  /* Focus ring — always teal */
  --ring: 0 0 0 2px var(--d-bg), 0 0 0 4px var(--qtg-teal);
  --ring-light: 0 0 0 2px var(--l-bg), 0 0 0 4px var(--qtg-teal);

  /* Motion — calm and mechanical */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;

  /* Grid background — faint dot pattern used on hero/section surfaces */
  --grid-dot: radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0);
  --grid-dot-size: 24px 24px;
}

/* ===============================================================
   SURFACE MODES
   Apply [data-mode="dark"] or [data-mode="light"] to document root
   or any container to flip.
   =============================================================== */
[data-mode="dark"] {
  color-scheme: dark;
  --bg:            var(--d-bg);
  --bg-raised:     var(--d-bg-raised);
  --bg-sunken:     var(--d-bg-sunken);
  --bg-overlay:    var(--d-bg-overlay);
  --border:        var(--d-border);
  --border-strong: var(--d-border-strong);
  --border-faint:  var(--d-border-faint);
  --fg:            var(--d-fg);
  --fg-muted:      var(--d-fg-muted);
  --fg-dim:        var(--d-fg-dim);
  --fg-faint:      var(--d-fg-faint);
  --shadow:        var(--shadow-d-md);
  --shadow-s:      var(--shadow-d-sm);
  --focus-ring:    var(--ring);
  background-color: var(--bg);
  color: var(--fg);
}

[data-mode="light"] {
  color-scheme: light;
  --bg:            var(--l-bg);
  --bg-raised:     var(--l-bg-raised);
  --bg-sunken:     var(--l-bg-sunken);
  --bg-overlay:    var(--l-bg-overlay);
  --border:        var(--l-border);
  --border-strong: var(--l-border-strong);
  --border-faint:  var(--l-border-faint);
  --fg:            var(--l-fg);
  --fg-muted:      var(--l-fg-muted);
  --fg-dim:        var(--l-fg-dim);
  --fg-faint:      var(--l-fg-faint);
  --shadow:        var(--shadow-md);
  --shadow-s:      var(--shadow-sm);
  --focus-ring:    var(--ring-light);
  background-color: var(--bg);
  color: var(--fg);
}

/* ===============================================================
   SEMANTIC TYPE CLASSES
   =============================================================== */
.qtg-display-xl,
.qtg-display-l,
.qtg-display-m,
.qtg-h1, .qtg-h2, .qtg-h3, .qtg-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-feature-settings: var(--ff-tabular);
  color: var(--fg);
  margin: 0;
}
.qtg-display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--lt-display-xl); font-weight: var(--fw-medium); }
.qtg-display-l  { font-size: var(--fs-display-l);  line-height: var(--lh-display-l);  letter-spacing: var(--lt-display-l);  font-weight: var(--fw-medium); }
.qtg-display-m  { font-size: var(--fs-display-m);  line-height: var(--lh-display-m);  letter-spacing: var(--lt-display-m);  font-weight: var(--fw-medium); }
.qtg-h1         { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--lt-h1); font-weight: var(--fw-semibold); }
.qtg-h2         { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--lt-h2); font-weight: var(--fw-semibold); }
.qtg-h3         { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--lt-h3); font-weight: var(--fw-medium); }
.qtg-h4         { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--lt-h4); font-weight: var(--fw-medium); }

.qtg-body-l,
.qtg-body,
.qtg-body-s,
.qtg-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  color: var(--fg-muted);
  margin: 0;
}
.qtg-body-l  { font-size: var(--fs-body-l); line-height: var(--lh-body-l); color: var(--fg); }
.qtg-body    { font-size: var(--fs-body);   line-height: var(--lh-body); }
.qtg-body-s  { font-size: var(--fs-body-s); line-height: var(--lh-body-s); }
.qtg-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-dim); }

/* Monospace micro-labels — signature voice */
.qtg-mono,
.qtg-mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: var(--fw-medium);
  letter-spacing: var(--lt-mono);
  text-transform: uppercase;
  font-feature-settings: var(--ff-mono);
  color: var(--qtg-teal);
}
.qtg-mono-label.is-muted { color: var(--fg-dim); }
.qtg-mono-l { font-size: var(--fs-mono-l); }
.qtg-mono-s { font-size: var(--fs-mono-s); }

/* Data / figure — tabular and precise */
.qtg-figure,
.qtg-stat {
  font-family: var(--font-display);
  font-feature-settings: var(--ff-tabular);
  font-weight: var(--fw-medium);
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* Code */
.qtg-code {
  font-family: var(--font-mono);
  font-size: var(--fs-body-s);
  color: var(--fg);
  background: var(--bg-sunken);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-sm);
  padding: 2px 6px;
}

/* Utility — grid dot bg */
.qtg-grid-bg {
  background-image: var(--grid-dot);
  background-size: var(--grid-dot-size);
  color: var(--border);
}