/* ==========================================================================
   mode40 Web Design Tokens
   Generated from tokens/mode40-tokens.json (canonical source of truth, v1.0.0)
   Root = 16px. Two type families only: IBM Plex Sans + IBM Plex Mono.
   Do not invent colors, fonts, or sizes. Every value below is canonical.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     COLOR: core
     ---------------------------------------------------------------------- */
  --m40-cyan:  #00D4DE; /* Primary accent: mark, eyebrows, numbers, links, rules */
  --m40-navy:  #001D25; /* Primary dark: callouts, table headers, dark sections */
  --m40-ink:   #1A1A1A; /* Headings, strong text, high-emphasis on light */
  --m40-body:  #262626; /* Default paragraph / body text on light */
  --m40-grey:  #8A8A8A; /* Captions, footer, metadata, hairlines, muted text */
  --m40-white: #FFFFFF; /* Page background, text on navy, reverse wordmark */

  /* COLOR: surface */
  --m40-zebra:     #F0F0F0; /* Alternating (even) table rows, subtle banding */
  --m40-scope:     #E6F8FB; /* Pale-cyan informational box backgrounds */
  --m40-hairline:  #E2E2E2; /* Light dividers / rules on white */

  /* COLOR: semantic aliases */
  --m40-accent:          #00D4DE;
  --m40-heading:         #1A1A1A;
  --m40-body-text:       #262626;
  --m40-muted:           #8A8A8A;
  --m40-link:            #00D4DE;
  --m40-on-dark-text:    #FFFFFF;
  --m40-on-dark-accent:  #00D4DE;
  --m40-page-bg:         #FFFFFF;
  --m40-dark-bg:         #001D25;
  --m40-divider:         #E2E2E2;

  /* COLOR: approved navy/cyan tints (charts & depth only; never new hues) */
  --m40-navy-80: #33484F;
  --m40-navy-60: #667579;
  --m40-navy-40: #99A4A7;
  --m40-navy-20: #CCD2D3;
  --m40-cyan-60: #66E5EB;
  --m40-cyan-30: #B3F2F5;

  /* ----------------------------------------------------------------------
     TYPOGRAPHY: families (IBM Plex Sans + IBM Plex Mono only)
     ---------------------------------------------------------------------- */
  --m40-font-sans: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --m40-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* TYPOGRAPHY: weights */
  --m40-weight-light:    300;
  --m40-weight-regular:  400;
  --m40-weight-medium:   500;
  --m40-weight-semibold: 600;

  /* ----------------------------------------------------------------------
     TYPE SCALE: web (root 16px). size / line-height / tracking per role.
     Mirrors typography.scale_web exactly.
     ---------------------------------------------------------------------- */

  /* display: IBM Plex Sans Light */
  --m40-display-size:     3.5rem;   /* 56px */
  --m40-display-line:     1.05;
  --m40-display-track:    -0.01em;
  --m40-display-weight:   300;

  /* h1: IBM Plex Sans Light */
  --m40-h1-size:          2.5rem;   /* 40px */
  --m40-h1-line:          1.1;
  --m40-h1-track:         -0.01em;
  --m40-h1-weight:        300;

  /* h2: IBM Plex Sans SemiBold */
  --m40-h2-size:          1.75rem;  /* 28px */
  --m40-h2-line:          1.2;
  --m40-h2-track:         0;
  --m40-h2-weight:        600;

  /* h3: IBM Plex Sans SemiBold */
  --m40-h3-size:          1.375rem; /* 22px */
  --m40-h3-line:          1.3;
  --m40-h3-track:         0;
  --m40-h3-weight:        600;

  /* eyebrow: IBM Plex Mono Medium, uppercase, tracked, cyan */
  --m40-eyebrow-size:     0.8125rem; /* 13px */
  --m40-eyebrow-line:     1.0;
  --m40-eyebrow-track:    0.12em;
  --m40-eyebrow-weight:   500;

  /* lead: IBM Plex Sans Regular */
  --m40-lead-size:        1.3125rem; /* 21px */
  --m40-lead-line:        1.4;
  --m40-lead-track:       0;
  --m40-lead-weight:      400;

  /* body: IBM Plex Sans Regular */
  --m40-body-size:        1.125rem;  /* 18px */
  --m40-body-line:        1.6;
  --m40-body-track:       0;
  --m40-body-weight:      400;

  /* small: IBM Plex Sans Regular, grey */
  --m40-small-size:       0.875rem;  /* 14px */
  --m40-small-line:       1.5;
  --m40-small-track:      0;
  --m40-small-weight:     400;

  /* footer: IBM Plex Mono Regular, grey */
  --m40-footer-size:      0.8125rem; /* 13px */
  --m40-footer-line:      1.4;
  --m40-footer-track:     0.04em;
  --m40-footer-weight:    400;

  /* table header: IBM Plex Sans SemiBold, white-on-navy */
  --m40-table-header-size:   0.875rem; /* 14px */
  --m40-table-header-line:   1.2;
  --m40-table-header-track:  0;
  --m40-table-header-weight: 600;

  /* table body: IBM Plex Sans Regular */
  --m40-table-body-size:   0.9375rem; /* 15px */
  --m40-table-body-line:   1.4;
  --m40-table-body-track:  0;
  --m40-table-body-weight: 400;

  /* ----------------------------------------------------------------------
     SPACING: web base unit = 8px. Use multiples; do not freehand.
     Mirrors spacing.scale_px [4, 8, 12, 16, 24, 32, 48, 64, 96, 128].
     ---------------------------------------------------------------------- */
  --m40-space-0:   0;
  --m40-space-1:   4px;
  --m40-space-2:   8px;    /* base unit */
  --m40-space-3:   12px;
  --m40-space-4:   16px;
  --m40-space-5:   24px;
  --m40-space-6:   32px;
  --m40-space-7:   48px;
  --m40-space-8:   64px;
  --m40-space-9:   96px;
  --m40-space-10:  128px;

  /* ----------------------------------------------------------------------
     LAYOUT: web geometry (layout.web)
     ---------------------------------------------------------------------- */
  --m40-max-content-width:  1200px;
  --m40-reading-measure:    720px;
  --m40-gutter:             24px;
  --m40-section-padding-y:  96px;

  /* breakpoints (reference values) */
  --m40-bp-sm: 640px;
  --m40-bp-md: 768px;
  --m40-bp-lg: 1024px;
  --m40-bp-xl: 1280px;

  /* signature accent bar geometry */
  --m40-accent-bar-width:  96px;
  --m40-accent-bar-height: 4px;
}