/* ============================================================
   MemberCairn design tokens.
   Defined on :root so they inherit everywhere. No component
   styles in this file — only custom properties.
   ============================================================ */
:root {
  /* Brand */
  --color-cairn-dark:      #2C2A22;
  --color-cairn-mid:       #C4A882;
  --color-cairn-parchment: #F5EDD8;

  /* Pine — the admin accent/action color (mirrors the sign-in screen's
     pine frame so the admin and login read as one product). */
  --color-pine-900:        #122b21;
  --color-pine-700:        #1f4b3b;   /* primary accent / action color */
  --color-pine-500:        #2f6a52;
  --color-pine-leaf:       #87a577;   /* light pine for indicators on the dark rail */

  /* Semantic accent (use these in new code). */
  --color-accent:          var(--color-pine-700);
  --color-accent-strong:   var(--color-pine-900);
  --color-accent-soft:     var(--color-pine-leaf);

  /* Warm clay brown — kept for genuinely earthy/decorative use only. */
  --color-cairn-clay:      #8B6F47;
  /* Trail amber — the "members-only" audience tint for events (form + list).
     Darkened to clear AA (#8a5a1f was 4.31:1 on parchment); was referenced with
     a hardcoded fallback and never actually defined. */
  --color-trail-700:       #7a4f18;
  /* Legacy accent alias. The admin accent migrated clay-brown -> pine
     (palette refresh, 2026-06): ~80 existing call sites used this token as
     the accent, so it now resolves to the pine accent. New code should use
     --color-accent / --color-cairn-clay explicitly, not this alias. */
  --color-cairn-brown:     var(--color-accent);

  /* Status */
  --color-needs-you-bg:    #FCEBEB;
  --color-needs-you-text:  #A04030;
  --color-needs-you-deep:  #7a3124;  /* hover state for needs-you buttons/CTAs */
  --color-confirmed-bg:    #EAF3DE;
  --color-confirmed-text:  #3B6D11;
  --color-reached-bg:      #E6F1FB;
  --color-reached-text:    #185FA5;
  /* Attention / "give this a look" — amber, distinct from confirm (green),
     required (red), and the grey "default" chip. AA on its own bg (5.5:1). */
  --color-attention-bg:    #FBEFD4;
  --color-attention-text:  #8A5A00;
  --color-cold-bg:         #F1EFE8;
  --color-cold-text:       #5F5E5A;
  --color-new-bg:          #E1F5EE;
  --color-new-text:        #0F6E56;
  /* Go-live — the deliberate olive-green "turn it on" action, kept distinct
     from pine --color-accent (routine primary) and confirmed green (status).
     Used by the welcome-trail activation banner + button. */
  --color-golive:          #5A7032;  /* button fill */
  --color-golive-hover:    #4C5F2A;
  --color-golive-deep:     #3A4A24;  /* focus ring + banner title */
  --color-golive-sub:      #4F5A3A;  /* banner subtext */
  --color-golive-bg:       #EEF3E4;  /* banner fill */
  --color-golive-border:   #97A877;

  /* Neutrals */
  --color-bg-primary:      #FFFFFF;
  --color-bg-secondary:    #F5EDD8;  /* Parchment — standard page background per brand spec */
  --color-bg-tint:         #EFE6CB;  /* one shade darker than parchment for inner fills/hovers */
  --color-border:          #E0D5B8;
  --color-text-primary:    #1E1C16;
  --color-text-secondary:  #5C5648;
  --color-text-muted:      #9C9080;

  /* Typography — National Park (Google Fonts) per MemberCairn brand spec */
  --font-display: "National Park", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:    "National Park", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   18px;
  --text-xl:   24px;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Elevation — the warm cairn-dark drop shadow used by raised cards/tiles.
     --shadow-card is the raised card (hero mini-browser, hovered front-door
     tiles); --shadow-card-sm is the smaller rail/tile lift. Route raw
     rgba(44,42,34,…) box-shadows here instead of re-declaring per surface. */
  --shadow-card:    0 6px 18px rgba(44, 42, 34, 0.10);
  --shadow-card-sm: 0 3px 12px rgba(44, 42, 34, 0.10);
}