/*
 * tokens.css — Nonprofit Runway Design Tokens
 * Single source of truth. Import this into every stylesheet.
 *
 * Usage: <link rel="stylesheet" href="/css/tokens.css">
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;1,300&family=DM+Mono:wght@300;400;500&display=swap');

:root {

  /* ── Backgrounds ── */
  --color-black:   #020305;
  --color-night:   #060a12;
  --color-deep:    #0a1020;
  --color-surface: #0f1828;

  /* ── Text ── */
  --color-white:   #f4f8ff;
  --color-pale:    #e4edf5;
  --color-silver:  #b8c9d8;
  --color-stone:   #8c9db5;

  /* ── Brand Accent ── */
  --color-sage:    #5a8c6a;
  --color-sage2:   #8ec49e;
  --color-sage3:   rgba(90, 140, 106, 0.12);

  /* ── Logo Gold (logo/icon only — not for UI text or buttons) ── */
  --color-gold:    #f5b731;

  /* ── Status (admin only) ── */
  --status-healthy:     #4a9e6a;
  --status-warning:     #c49030;
  --status-critical:    #c04848;
  --status-healthy-bg:  rgba(74, 158, 106, 0.12);
  --status-warning-bg:  rgba(196, 144, 48, 0.12);
  --status-critical-bg: rgba(192, 72, 72, 0.12);

  /* ── Borders ── */
  --border:        rgba(255, 255, 255, 0.07);
  --border-medium: rgba(255, 255, 255, 0.12);

  /* ── Typography ── */
  --font-display: 'DM Serif Display', serif;
  --font-body:    'Source Sans 3', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* ── Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ── Form & Authentication Pages (light theme) ── */
  --form-bg:      #f0ede6;
  --form-card:    #ffffff;
  --form-border:  #e0dbd2;
  --form-input:   #f0ede6;
  --form-text:    #1a1510;
  --form-text-2:  #5c5650;
  --form-label:   #3a3530;
  --form-accent:  #5a8c6a;
  --form-accent2: #8ec49e;
  --form-error:   #c04848;
  --form-logo-sun:#9a7a20;
}

/* ── Focus ring (WCAG AA/AAA) ── */
:focus-visible {
  outline: 2px solid var(--color-sage2);
  outline-offset: 2px;
}