/*
 * Nashville Grotto — design tokens.
 * The single source of truth for color and type. Change a value here and every
 * page follows. Reference: docs/style-guide.md. Do NOT hardcode a hex or a font
 * name in a template or component — always go through a var() below.
 */
:root {
  /* --- Brand & interaction (literal; these ARE the brand) --- */
  --ng-red: #df0d31;          /* signature: masthead rule, active nav, primary CTA */
  --ng-red-ink: #b80a28;      /* red hover/active */
  --ng-blue: #1fb1ea;         /* interactive default: primary buttons, focus */
  --ng-blue-ink: #1795c4;     /* blue hover/active */
  --ng-green: #189e65;        /* badge treeline accent */
  --ng-brown: #b15e16;        /* cave earth accent, kickers */
  --ng-brown-dark: #844610;
  --ng-yellow: #fdf037;       /* fills/notice stripes only — never text */

  /* --- Semantic status --- */
  --ng-success: #28a745;
  --ng-danger: #dc3545;

  /* --- Ink & neutrals (Bootstrap-derived cool greys) --- */
  --ng-ink: #212529;
  --ng-slate: #343a40;
  --ng-grey: #6c757d;
  --ng-line: #dee2e6;
  --ng-mist: #e9ecef;
  --ng-fog: #f8f9fa;
  --ng-white: #ffffff;

  /* --- Semantic surface tokens (light-only product) --- */
  --bg: var(--ng-white);
  --surface: var(--ng-white);
  --surface-2: var(--ng-fog);
  --text: var(--ng-ink);
  --muted: var(--ng-grey);
  --border: var(--ng-line);
  --shadow: 0 .0625rem .1875rem rgba(0, 0, 0, .09), 0 .5rem 1.5rem rgba(0, 0, 0, .05);

  /* --- Type --- */
  --font-display: 'Oswald', Arial, 'Helvetica Neue', sans-serif;
  --font-body: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  /* --- Layout --- */
  --maxw: 1100px;
  --radius: .25rem;
}