/**
 * Bright Neighbors Design Tokens
 * Centralized CSS custom properties (variables)
 * Source: Bright Neighbors Design System reference page
 *
 * Usage: @import '/design-tokens.css';
 * Tokens are defined on :root for global availability.
 */

:root {

  /* ─────────────────────────────────────────────
     COLORS — BRAND
  ───────────────────────────────────────────── */

  /* Navy (primary brand color) */
  --color-navy: #0b1a2e;
  --color-navy-mid: #132744;

  /* Amber (accent / CTA) */
  --color-amber: #f0a830;
  --color-amber-dim: #d4911f;
  --color-amber-bg: rgba(240, 168, 48, 0.12);
  --color-amber-light: #ffd56b;

  /* ─────────────────────────────────────────────
     COLORS — SEMANTIC (STATUS / FEEDBACK)
  ───────────────────────────────────────────── */

  /* Success */
  --color-green: #16a34a;
  --color-green-bg: #ecfdf5;
  --color-green-border: #a7f3d0;

  /* Error / Danger */
  --color-red: #dc2626;
  --color-red-bg: #fef2f2;
  --color-red-border: #fecaca;

  /* Info / Blue */
  --color-blue: #2563eb;
  --color-blue-bg: #eff6ff;
  --color-blue-border: #bfdbfe;

  /* Warning / Yellow */
  --color-yellow: #ca8a04;
  --color-yellow-bg: #fefce8;
  --color-yellow-border: #fde047;

  /* ─────────────────────────────────────────────
     COLORS — NEUTRAL (INKS, SURFACES, BORDERS)
  ───────────────────────────────────────────── */

  /* Ink (text) */
  --color-ink: #1e293b;
  --color-ink-2: #475569;
  --color-ink-3: #94a3b8;

  /* Surfaces */
  --color-sand: #faf7f0;
  --color-sand-dark: #f0e9da;
  --color-surface-2: #f5f0e8;
  --color-surface-raised: #ffffff;

  /* Border */
  --color-border: #e2e8f0;

  /* ─────────────────────────────────────────────
     COLORS — LEGACY ALIASES (existing app.html)
     These are kept for backward compatibility
     with the current app.html inline styles.
     Future components should prefer the
     semantic tokens above.
  ───────────────────────────────────────────── */
  --white: #ffffff;
  --slate: #64748b;
  --text: #1e293b;
  --sand: #faf7f0;
  --sand-dark: #f0e9da;

  /* ─────────────────────────────────────────────
     TYPOGRAPHY — FONT FAMILIES
  ───────────────────────────────────────────── */

  --font-heading: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-interface: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ─────────────────────────────────────────────
     TYPOGRAPHY — TYPE SCALE
  ───────────────────────────────────────────── */

  /* Display / Hero */
  --font-size-display: 50px;
  --font-size-display-line-height: 1.1;
  --font-size-display-letter-spacing: -0.02em;

  /* H1 / Section Title */
  --font-size-h1: 38px;
  --font-size-h1-line-height: 1.2;
  --font-size-h1-letter-spacing: -0.02em;

  /* H2 / Section */
  --font-size-h2: 30px;
  --font-size-h2-line-height: 1.25;
  --font-size-h2-letter-spacing: -0.01em;

  /* H3 / Card Title */
  --font-size-h3: 24px;
  --font-size-h3-line-height: 1.3;
  --font-size-h3-letter-spacing: 0;

  /* H4 / Subsection */
  --font-size-h4: 20px;
  --font-size-h4-line-height: 1.35;
  --font-size-h4-letter-spacing: 0;

  /* Body */
  --font-size-body: 15px;
  --font-size-body-line-height: 1.6;
  --font-size-body-letter-spacing: 0;

  /* Small / Meta */
  --font-size-small: 13px;
  --font-size-small-line-height: 1.5;
  --font-size-small-letter-spacing: 0;

  /* Label / Eyebrow */
  --font-size-label: 11px;
  --font-size-label-line-height: 1.4;
  --font-size-label-letter-spacing: 0.06em;

  /* ─────────────────────────────────────────────
     TYPOGRAPHY — FONT WEIGHTS
  ───────────────────────────────────────────── */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ─────────────────────────────────────────────
     SPACING — 4px GRID SYSTEM
  ───────────────────────────────────────────── */

  --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;

  /* ─────────────────────────────────────────────
     RADIUS & SHADOWS
  ───────────────────────────────────────────── */

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 100px;

  --shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 30px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 4px 12px rgba(240, 168, 48, 0.3);

  /* ─────────────────────────────────────────────
     TRANSITIONS
  ───────────────────────────────────────────── */

  --transition: 0.2s ease;
  --transition-slow: 0.35s ease;

}