/*
 * West Road Park HOA — Design Tokens
 *
 * This file is the single source of truth for the visual design system.
 * All color, typography, spacing, and radius values should be defined here.
 * Apply these tokens in component CSS; avoid hardcoding raw values elsewhere.
 *
 * Guiding principle: the neighborhood is the brand.
 * Palette draws from the entrance monument, mature trees, and the pond.
 */

:root {

  /* ── Color: Primary Identity ────────────────────────────────
   * Primary   — Forest dark green. The dominant identity color.
   *             Used for buttons, strong accents, and the favicon.
   * Secondary — Sage/muted green. Warm and natural.
   *             Used for the nav bar and secondary accents.
   * Accent    — Link color. Currently generic blue — a known
   *             candidate for a future nature-aligned refinement.
   * ─────────────────────────────────────────────────────────── */
  --color-primary:        #2e3d28;
  --color-secondary:      #a1ae90;
  --color-accent:         #2a6ca4;
  --color-accent-hover:   #1a4f7a;

  /* ── Color: Surfaces ────────────────────────────────────────
   * bg           — Page background. Warm near-white.
   * surface      — Section card background. Pure white.
   * surface-tint — Pale green panels. Nav drawer, subtle containers.
   * ─────────────────────────────────────────────────────────── */
  --color-bg:             #f5f5f5;
  --color-surface:        #ffffff;
  --color-surface-tint:   #f0f5ec;

  /* ── Color: Text ────────────────────────────────────────────
   * text         — Primary body text.
   * text-muted   — Captions, footer, secondary labels.
   * text-inverse — Warm cream. Used on dark/photo backgrounds.
   *                This is a key identity detail — warmer than
   *                pure white, recalls historic print materials.
   * ─────────────────────────────────────────────────────────── */
  --color-text:           #333333;
  --color-text-muted:     #666666;
  --color-text-inverse:   #f0f0e8;

  /* ── Color: Borders ─────────────────────────────────────────
   * border        — Standard dividers, image outlines, footer rule.
   * border-subtle — Very light dividers inside sections.
   * ─────────────────────────────────────────────────────────── */
  --color-border:         #dddddd;
  --color-border-subtle:  #ece9e4;

  /* ── Legacy aliases ─────────────────────────────────────────
   * These preserve the original variable names so existing CSS
   * continues to resolve correctly without modification.
   * Do not use these names in new component CSS.
   * ─────────────────────────────────────────────────────────── */
  --header-bg:            var(--color-secondary);
  --dark-green:           var(--color-primary);
  --background-color:     var(--color-bg);
  --text-color:           var(--color-text);
  --light-text:           var(--color-text-muted);

  /* ── Typography ─────────────────────────────────────────────
   * A single serif typeface system.
   * Besley: historical, editorial, authoritative.
   * Georgia and Times New Roman serve as system fallbacks
   * that carry a similar institutional weight.
   * ─────────────────────────────────────────────────────────── */
  --font-serif:           "Besley", Georgia, "Times New Roman", serif;

  /* Type scale — named by role, not by size */
  --text-caption:         0.75rem;   /* resource group labels, small UI labels */
  --text-fine:            0.82rem;   /* banner secondary text */
  --text-sm:              0.875rem;  /* back links, fine print */
  --text-base:            0.95rem;   /* body copy, list items */
  --text-nav:             0.9rem;    /* nav links */
  --text-ui:              0.88rem;   /* button labels */
  --text-section:         1.1rem;    /* alert headings, subheadings */
  --text-h2:              1.2rem;    /* section headings */
  --text-h3:              1rem;      /* FAQ items, meeting group labels */
  --text-display-sm:      2rem;      /* mobile hero */
  --text-display:         2.8rem;    /* hero heading */

  /* Letter spacing — used for institutional text treatments */
  --tracking-normal:      0;
  --tracking-wide:        0.05em;
  --tracking-wider:       0.1em;
  --tracking-widest:      0.18em;

  /* ── Spacing ─────────────────────────────────────────────────
   * A simple 4px base-unit scale.
   * ─────────────────────────────────────────────────────────── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */

  /* ── Border radius ───────────────────────────────────────────
   * Subtle, not rounded — consistent with the restrained aesthetic.
   * ─────────────────────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
}