/**
 * Charlie Shane — Brand Tokens
 * Palette + fonts from the approved homepage design (sage skin).
 * Source of truth: .claude/docs/plans/2026-07-17--design.md §2
 */

:root {
  /* --- Brand palette (homepage overrides) --- */
  --color-brand:      #7B9769;   /* sage — primary identity */
  --color-alt-brand:  #6D8481;   /* muted teal — kickers/labels */
  --color-primary:    #B9C8B1;   /* light sage — accents/decor */
  --color-secondary:  #E6E6E6;   /* hairline borders */
  --color-headings:   #404F3C;   /* deep green — headings + accent */
  --color-body:       #535353;   /* body copy */
  --color-background: #FFFFFF;
  --color-accent:     #404F3C;   /* CTA / action */

  /* --- Warm neutrals --- */
  --warm-1:    #F6F3EC;
  --warm-2:    #FBF9F4;
  --sage-tint: #EDF1E9;

  /* --- Semantic aliases --- */
  --text-heading: var(--color-headings);
  --text-body:    var(--color-body);
  --text-cta:     #FFFFFF;
  --bg-page:      var(--color-background);
  --cta-bg:       var(--color-accent);
  --cta-hover-bg: #33402f;             /* accent darkened ~15% (static; color-mix avoided for KSES-adjacent safety) */
  --border-color: var(--color-brand);
  --star-color:   #F5A623;
  --link-color:   var(--color-accent);
  --link-hover:   var(--color-brand);

  /* --- Fonts --- */
  --font-heading: 'Bricolage Grotesque', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:    'Geist', system-ui, -apple-system, Segoe UI, sans-serif;

  /* --- Weights --- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* --- Layout --- */
  --container-max:     1200px;
  --container-padding: 40px;
  --section-padding-y: 100px;
  --radius-sm:  4px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  28px;
  --transition-base: 0.2s ease;
}

@media (max-width: 768px) {
  :root {
    --container-padding: 20px;
    --section-padding-y: 56px;
  }
}