/* ============================================================
   THE TECH DIPLOMAT — Design Tokens v2 ("Meridian" system)
   Drop-in replacement for the :root block in styles.css.
   All text/background pairs below pass WCAG AA (most pass AAA).
   ============================================================ */

:root {
  /* ---- Paper & ink ---- */
  --paper:    #f5f1e8;   /* page background (unchanged — heritage) */
  --paper-2:  #ede8dc;   /* alt sections */
  --surface:  #fffdf8;   /* cards */
  --ink:      #142e36;   /* primary text + dark surfaces. 12.6:1 on paper */
  --ink-2:    #51666d;   /* muted text. 5.4:1 on paper */

  /* ---- Accents ---- */
  --teal:     #1c6478;   /* links, interaction. 5.9:1 on paper, 6.7:1 on white */
  --teal-soft:#5eb3c7;   /* DECORATIVE ONLY (map lines, rules on dark). Never body text. */
  --seal:     #a63a26;   /* lacquer red. 5.7:1 on paper. USE SPARINGLY:
                            active states, map origin dot, one rule per section.
                            If it appears >5 times per viewport, remove some. */

  /* ---- Lines ---- */
  --line:     #cfc8b9;   /* hairline rules on paper */
  --line-ink: rgba(245, 241, 232, 0.18); /* hairlines on ink surfaces */
  --map-line: #9db8c0;   /* meridian graticule */

  /* ---- Type ---- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid type scale (min, fluid, max) */
  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.875rem);  /* meta, kickers */
  --step-0:  clamp(1rem, 0.95rem + 0.3vw, 1.125rem);     /* body */
  --step-1:  clamp(1.7rem, 1.1rem + 2vw, 2.6rem);        /* section titles */
  --step-2:  clamp(2.4rem, 1.2rem + 4.5vw, 4.4rem);      /* hero */

  /* ---- Spacing rhythm ---- */
  --space-section: clamp(4rem, 8vw, 7.5rem);
  --space-section-tight: clamp(2.5rem, 5vw, 4.5rem);  /* for secondary sections (e.g. LinkedIn thoughts) */

  /* ---- Misc ---- */
  --radius: 2px;            /* near-square = editorial. Round corners read SaaS. */
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* ---- Legacy aliases so existing styles.css keeps working while you migrate.
          Delete these once no rule references the old names. ---- */
  --primary: var(--ink);
  --secondary: #4a7c8c;
  --accent: var(--teal);          /* old #5eb3c7 failed contrast as text — now safe */
  --accent-pink: var(--seal);     /* pink is retired; red takes its slots */
  --accent-gradient: none;        /* gradient motif retired */
  --bg: var(--paper);
  --bg-white: var(--surface);
  --bg-alt: var(--paper-2);
  --border: var(--line);
  --text: var(--ink);
  --text-light: var(--ink-2);
}