/* ============================================
   AT PEACE REALTY — DESIGN TOKENS
   Single source of truth for all design variables.
   Primary accent: Hampton Blue.
   Warm accent: Maroon (reserved for scripture,
   blockquote rails, and people/role labels).
   ============================================ */

:root {
  /* ----- Color: brand surfaces ----- */
  --black:           #1A1A1A;
  --charcoal:        #2C2C2C;
  --ink:             #1F2024;
  --ink-soft:        #34363B;
  --silver:          #B0B0B0;
  --light-gray:      #F4F4F4;
  --off-white:       #FAFAFA;
  --white:           #FFFFFF;
  --text-body:       #3A3A3A;
  --text-light:      #6E6E6E;
  --hairline:        rgba(31,32,36,0.08);
  --hairline-strong: rgba(31,32,36,0.14);

  /* ----- Primary accent — Hampton Blue ----- */
  --accent:        #2C4A6E;
  --accent-hover:  #3A5B82;
  --accent-soft:   #5A7A9C;
  --accent-tint:   rgba(44,74,110,0.06);
  --accent-tint-2: rgba(44,74,110,0.12);

  /* ----- Warm accent — Maroon (reserved use) ----- */
  --warm:         #7B2332;
  --warm-hover:   #9A2E40;
  --warm-soft:    #8E3C49;
  --warm-tint:    rgba(123,35,50,0.06);
  --warm-tint-2:  rgba(123,35,50,0.12);

  /* ----- Community page accent (used only on community.html) ----- */
  --warm-green:       #3A7D5C;
  --warm-green-hover: #2E6349;
  --warm-green-light: rgba(58,125,92,0.08);
  --warm-gold:        #C9963B;

  /* ----- Typography ----- */
  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Source Sans 3', sans-serif;

  /* ----- Radius scale ----- */
  --r-xs:     6px;
  --r-sm:    10px;
  --r-md:    14px;
  --r-lg:    20px;
  --r-xl:    28px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ----- Motion ----- */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-calm: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 560ms;
  --transition-calm: var(--t-base) var(--ease-soft);
  --transition: var(--t-base) var(--ease-soft);

  /* ----- Shadows — softer, two-layer, warmer cast ----- */
  --shadow-xs:    0 1px 2px rgba(31,32,36,0.04);
  --shadow-sm:    0 2px 6px rgba(31,32,36,0.05), 0 1px 2px rgba(31,32,36,0.04);
  --shadow-md:    0 6px 18px rgba(31,32,36,0.06), 0 2px 6px rgba(31,32,36,0.04);
  --shadow-lg:    0 18px 40px rgba(31,32,36,0.08), 0 4px 12px rgba(31,32,36,0.05);
  --shadow-xl:    0 30px 60px rgba(31,32,36,0.10), 0 8px 20px rgba(31,32,36,0.06);
  --shadow-focus: 0 0 0 4px rgba(44,74,110,0.16);
  --img-inset:    inset 0 0 0 1px rgba(31,32,36,0.04);

  /* Scroll-driven morph shadow tuning (used by hero + .section-morph JS) */
  --shadow-morph-offset-y: 28px;
  --shadow-morph-blur:     70px;
  --shadow-morph-spread:  -12px;
  --shadow-morph-alpha:    0.42;

  /* ----- Spacing scale (4px base) ----- */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32: 128px;

  /* ----- Type scale (Major-Third-ish) ----- */
  --text-xs:    0.75rem;   /* 12px — micro labels, count chips */
  --text-sm:    0.875rem;  /* 14px — small body, captions */
  --text-base:  1rem;      /* 16px — body default */
  --text-md:    1.0625rem; /* 17px — long-form body */
  --text-lg:    1.125rem;  /* 18px — large body */
  --text-xl:    1.25rem;   /* 20px — emphasis text */
  --text-2xl:   1.5rem;    /* 24px — small headings */
  --text-3xl:   1.875rem;  /* 30px — section titles */
  --text-4xl:   2.25rem;   /* 36px — display */
  --text-5xl:   3rem;      /* 48px — hero */
  --text-6xl:   3.6rem;    /* ~57px — hero max */
}