/* ==========================================================================
   QUANTUM METRICS — colors_and_type.css
   Teal-on-black palette · Codec Pro (display) + Inter (UI/body).
   "Clarity through insight."
   ========================================================================== */

/* Codec Pro — brand display face (supplied) */
@font-face {
  font-family: "Codec Pro";
  src: url("../fonts/CodecPro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Codec Pro";
  src: url("../fonts/CodecPro-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Inter — UI/body face */
@import url("https://rsms.me/inter/inter.css");

:root {
  /* ------------------------------------------------------------------------
     CORE PALETTE — the teal is the brand. It is doing a lot of work.
     ------------------------------------------------------------------------ */

  /* Brand teal (sampled from logo: #2C6A68) */
  --qm-teal-950:  #0C1F1E;
  --qm-teal-900:  #112E2D;
  --qm-teal-800:  #1B4746;
  --qm-teal-700:  #235855;
  --qm-teal-600:  #2C6A68;   /* PRIMARY — logo teal */
  --qm-teal-500:  #3A8683;
  --qm-teal-400:  #5CA6A3;
  --qm-teal-300:  #8AC4C1;
  --qm-teal-200:  #BCDDDB;
  --qm-teal-100:  #DCEDEC;
  --qm-teal-50:   #EEF6F5;

  /* Neutrals — warm-cool balanced, paper feel for reports */
  --qm-ink-950:   #0A0C0C;   /* near-black, used on logo backgrounds */
  --qm-ink-900:   #141817;
  --qm-ink-800:   #1F2423;
  --qm-ink-700:   #2D3432;
  --qm-ink-600:   #4A5451;
  --qm-ink-500:   #6B7370;
  --qm-ink-400:   #9AA09D;
  --qm-ink-300:   #C4C8C6;
  --qm-ink-200:   #E2E5E3;
  --qm-ink-100:   #F0F2F1;
  --qm-ink-50:    #F7F8F7;
  --qm-paper:     #FAFBFA;
  --qm-white:     #FFFFFF;

  /* Analytical accents — for charts, status, data viz.
     Muted & professional; no candy colors. */
  --qm-ochre:     #B8894A;   /* warn / attention */
  --qm-ochre-soft:#E8D4B0;
  --qm-clay:      #A85A3E;   /* risk / negative */
  --qm-clay-soft: #F1D4C8;
  --qm-moss:      #5A7A3E;   /* positive / on-track */
  --qm-moss-soft: #D5E1C2;
  --qm-slate:     #4A6680;   /* neutral data series */
  --qm-slate-soft:#D0DAE4;

  /* ------------------------------------------------------------------------
     SEMANTIC TOKENS — use these in components, not the raw palette
     ------------------------------------------------------------------------ */

  /* Foreground */
  --fg-1: var(--qm-ink-900);      /* primary text */
  --fg-2: var(--qm-ink-700);      /* secondary text, body copy on paper */
  --fg-3: var(--qm-ink-500);      /* tertiary, captions, labels */
  --fg-4: var(--qm-ink-400);      /* quaternary, disabled, dividers */
  --fg-invert: var(--qm-white);
  --fg-brand: var(--qm-teal-600);
  --fg-brand-hover: var(--qm-teal-700);

  /* Background */
  --bg-1: var(--qm-white);        /* page */
  --bg-2: var(--qm-paper);        /* subtle surface (report background) */
  --bg-3: var(--qm-ink-50);       /* cards on paper */
  --bg-4: var(--qm-ink-100);      /* hover surfaces */
  --bg-brand: var(--qm-teal-600);
  --bg-brand-soft: var(--qm-teal-50);
  --bg-ink: var(--qm-ink-950);    /* inverse surface (hero sections) */
  --bg-ink-2: var(--qm-ink-900);

  /* Borders */
  --border-1: var(--qm-ink-200);
  --border-2: var(--qm-ink-300);
  --border-strong: var(--qm-ink-700);
  --border-brand: var(--qm-teal-600);

  /* Status */
  --status-positive: var(--qm-moss);
  --status-positive-bg: var(--qm-moss-soft);
  --status-warn: var(--qm-ochre);
  --status-warn-bg: var(--qm-ochre-soft);
  --status-risk: var(--qm-clay);
  --status-risk-bg: var(--qm-clay-soft);
  --status-neutral: var(--qm-slate);
  --status-neutral-bg: var(--qm-slate-soft);

  /* Data viz series (in order) */
  --data-1: var(--qm-teal-600);
  --data-2: var(--qm-slate);
  --data-3: var(--qm-ochre);
  --data-4: var(--qm-moss);
  --data-5: var(--qm-clay);
  --data-6: var(--qm-teal-300);

  /* ------------------------------------------------------------------------
     TYPOGRAPHY — Inter. Tight tracking on display, neutral on body.
     ------------------------------------------------------------------------ */

  --font-sans: "Inter", "Inter Variable", system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Codec Pro", "Inter", system-ui, -apple-system,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace,
               SFMono-Regular, Menlo, Consolas, monospace;

  /* Weights actually used in the brand */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;  /* logo METRICS weight */

  /* Scale — modular, slightly tight. 16px base. */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  80px;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* Letter spacing — brand uses WIDE tracking on uppercase eyebrows */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;   /* eyebrows / category labels */
  --tracking-widest:  0.18em;   /* small caps section labels */

  /* ------------------------------------------------------------------------
     SPACING — 4px base, geometric progression
     ------------------------------------------------------------------------ */
  --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;
  --space-32: 128px;

  /* ------------------------------------------------------------------------
     RADII — restrained. Brand reads "engineering", not "app-store cute".
     ------------------------------------------------------------------------ */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ------------------------------------------------------------------------
     SHADOWS — subtle. Analytical UIs use elevation, not drama.
     ------------------------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(20, 24, 23, 0.04);
  --shadow-sm: 0 1px 2px rgba(20, 24, 23, 0.06),
               0 1px 3px rgba(20, 24, 23, 0.04);
  --shadow-md: 0 2px 4px rgba(20, 24, 23, 0.06),
               0 4px 8px rgba(20, 24, 23, 0.05);
  --shadow-lg: 0 4px 8px rgba(20, 24, 23, 0.06),
               0 12px 24px rgba(20, 24, 23, 0.08);
  --shadow-xl: 0 8px 16px rgba(20, 24, 23, 0.08),
               0 24px 48px rgba(20, 24, 23, 0.10);

  /* Inset / focus */
  --shadow-inset: inset 0 1px 2px rgba(20, 24, 23, 0.06);
  --ring-brand:  0 0 0 3px rgba(44, 106, 104, 0.25);
  --ring-focus:  0 0 0 3px rgba(44, 106, 104, 0.45);

  /* ------------------------------------------------------------------------
     MOTION — short, confident, no bounces
     ------------------------------------------------------------------------ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   320ms;

  /* ------------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------------ */
  --container-narrow: 720px;
  --container-prose:  880px;
  --container-std:   1200px;
  --container-wide:  1440px;
}

/* ==========================================================================
   SEMANTIC TYPOGRAPHY CLASSES
   Use .qm-h1, .qm-body, etc. rather than styling raw tags in consumer UIs.
   ========================================================================== */

.qm-display,
.qm-h1,
.qm-h2,
.qm-h3,
.qm-h4,
.qm-body,
.qm-body-lg,
.qm-caption,
.qm-eyebrow,
.qm-mono,
.qm-quote {
  font-family: var(--font-sans);
  color: var(--fg-1);
  font-feature-settings: "cv11", "ss01", "ss03"; /* Inter stylistic refinements */
}

.qm-display {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.qm-h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.qm-h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.qm-h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}

.qm-h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
}

.qm-body {
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.qm-body-lg {
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.qm-caption {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.qm-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--fg-brand);
}

.qm-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  font-feature-settings: "zero", "ss01";
  color: var(--fg-2);
}

.qm-quote {
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* Tabular numbers — used EVERYWHERE for data */
.qm-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "zero";
}