/* ============================================================
   Unifybase — Editorial Calm bridge
   Loads AFTER css/styles.css.

   Re-points the legacy token names defined in styles.css to the
   new tokens.css values, so the rest of the app picks up the
   Editorial Calm direction without touching styles.css.

   What's bridged (visible everywhere):
     • Brand teal  #0D9488 → #0F766E
     • Hover/dark teal shades → teal-800
     • Page bg     #F8F8FA (cool) → #FAFAF7 (cream)
     • Secondary surface → cream-2
     • Borders → warmer line color
     • Ink text → warm ink palette
     • Body font → Manrope

   What's NOT bridged (intentional — would shift layouts):
     • --radius-* (existing 8/10/12 stays as-is)
     • --space-*  (existing scale)
     • Component classes (.btn, .card, etc.) keep their geometry.
   ============================================================ */

:root {
  /* Brand — primary teal moves from teal-600 to teal-700 */
  --primary:          var(--accent);
  --primary-hover:    var(--accent-hover);
  --primary-active:   var(--color-teal-600);
  --primary-dark:     var(--color-teal-800);
  --primary-light:    var(--color-teal-600);
  --primary-disabled: var(--color-teal-100);
  --primary-lighter:  var(--color-teal-50);

  --primary-rgb:        15, 118, 110;
  --primary-hover-rgb:  17, 94, 89;
  --primary-active-rgb: 13, 148, 136;

  /* Ink / text */
  --text-header:    var(--fg);
  --text-body:      var(--fg-body);
  --text-muted:     var(--fg-muted);
  --text-tertiary:  var(--color-ink-300);
  --text-on-color:  var(--fg-inverse);
  --text:           var(--fg-body);
  --text-primary:   var(--fg);
  --text-secondary: var(--fg-muted);
  --dark:           var(--fg);
  --dark-light:     var(--fg-body);

  /* Surfaces */
  --bg-dark:        var(--bg-inverse);
  --bg-light:       var(--color-ink-200);
  --bg-ultra-light: var(--bg);
  --light:          var(--bg);
  --bg-primary:     var(--bg-elevated);
  --bg-secondary:   var(--color-paper-2);

  /* Borders */
  --border:        var(--color-line);
  --border-light:  var(--color-ink-200);
  --border-dark:   var(--color-ink-500);
  --border-color:  var(--color-line);
}

/* Base font shift: Manrope across the app */
body {
  font-family: var(--font-sans);
}

/* Display headings — opt-in via .editorial-display when a page wants the
   Newsreader serif. Existing h1/h2/h3 styling in styles.css is untouched. */
.editorial-display,
h1.editorial,
h2.editorial {
  font-family: var(--font-serif);
  letter-spacing: -0.02em;
}