/*
 * theme.css — Reno Police Protective Association
 * RPPA public website theme. Replaces BUS dark theme entirely.
 * Navy / gold law enforcement palette.
 * Blue Cover Six LLC
 */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
  /* ── Brand colors ── */
  --clr-primary:         #1a2a4c;
  --clr-primary-dark:    #0e1a2e;
  --clr-primary-light:   #253b6e;
  --clr-accent:          #c8a84b;
  --clr-accent-dark:     #9e7e2a;
  --clr-accent-light:    #e0c978;

  /* ── Surface colors ── */
  --clr-surface:         #ffffff;
  --clr-surface-alt:     #f4f5f7;
  --clr-surface-card:    #ffffff;
  --clr-surface-dark:    #0e1a2e;

  /* ── Text colors ── */
  --clr-text:            #1c1c1c;
  --clr-text-muted:      #5a5a5a;
  --clr-text-light:      rgba(255,255,255,0.85);
  --clr-text-dim:        rgba(255,255,255,0.6);

  /* ── UI colors ── */
  --clr-border:          rgba(0,0,0,0.12);
  --clr-border-light:    rgba(255,255,255,0.12);
  --clr-overlay:         rgba(14,26,46,0.50);
  --clr-input-bg:        #ffffff;
  --clr-input-border:    #c8c8c8;
  --clr-input-focus:     #1a2a4c;

  /* ── State colors ── */
  --clr-success:         #2e7d32;
  --clr-error:           #c62828;

  /* ── Typography ── */
  --font-display:  'Georgia', 'Times New Roman', serif;
  --font-body:     'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:     'Consolas', 'Monaco', monospace;

  /* ── Layout ── */
  --nav-height:      72px;
  --max-width:       1200px;
  --section-pad:     5rem 2rem;
  --section-pad-sm:  3rem 1.5rem;

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

  /* ── Shadows ── */
  --shadow-card:     0 2px 8px rgba(0,0,0,.08);
  --shadow-elevated: 0 4px 16px rgba(0,0,0,.12);
  --shadow-nav:      0 2px 8px rgba(0,0,0,.35);
  --shadow-modal:    0 8px 32px rgba(0,0,0,.4);

  /* ── Transitions ── */
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── busDialog CSS var aliases (dialog.js uses --color-* vars) ── */
  --color-surface-card:     #ffffff;
  --color-accent:           #c8a84b;
  --color-accent-dark:      #9e7e2a;
  --color-on-accent:        #0e1a2e;
  --color-on-surface:       #1c1c1c;
  --color-on-surface-muted: #5a5a5a;
  --color-primary:          #1a2a4c;
  --color-primary-light:    #253b6e;
  --color-on-primary:       #ffffff;
  --color-input-border:     #c8c8c8;
  --radius-card:            4px;
  --radius-button:          4px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--clr-text);
  background: var(--clr-surface);
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }