/*
 * Navigation App — Colour Configuration
 * ======================================
 * Edit the variables below to restyle the entire application.
 * All other CSS files (theme-colors.css, app-theme.css) and the
 * inline <style> in index.html reference these tokens via var().
 *
 * Material Design 3 role mapping:
 *   --color-primary        →  Primary / key action colour
 *   --color-bg             →  Background (page canvas)
 *   --color-surface        →  Surface (card / panel fill)
 *   --color-border         →  Outline / divider
 *   --color-text           →  On-Surface (body text)
 *   --color-muted          →  On-Surface-Variant (secondary text)
 *   --color-success        →  Tertiary / positive semantic
 *   --color-warning        →  Warning semantic
 *   --color-error          →  Error
 */

:root {
  /* ── Brand ────────────────────────────────────────── */
  --color-primary:         #4F46E5;   /* indigo-600 */
  --color-primary-hover:   #4338CA;   /* indigo-700 */
  --color-primary-light:   #EEF2FF;   /* indigo-50  */

  /* ── Topbar (dark surface for nav bar) ───────────── */
  --color-topbar:          #1E1B4B;   /* indigo-950 */
  --color-topbar-hover:    #312E81;   /* indigo-900 */

  /* ── Layout surfaces ─────────────────────────────── */
  --color-bg:              #F8FAFC;
  --color-surface:         #FFFFFF;
  --color-border:          #E2E8F0;
  --color-border-strong:   #CBD5E1;

  /* ── Typography ──────────────────────────────────── */
  --color-text:            #0F172A;
  --color-muted:           #64748B;

  /* ── Semantic states ─────────────────────────────── */
  --color-success:         #16A34A;
  --color-warning:         #D97706;
  --color-error:           #DC2626;
}