/* ==========================================================================
   DESIGN TOKENS — vars.css (ORIGINAL THEME)
   ========================================================================== */

:root {
  /* ─── Brand Colors — "Natural Button Herbal Green #82B882" ─── */
  --clr-bg:         #f4f8f4;
  --clr-surface:    #ffffff;
  --clr-card:       #ffffff;
  --clr-card-hover: #eaf4ea;
  --clr-border:     rgba(130, 184, 130, 0.28);

  --clr-primary:    #82B882;
  --clr-primary-hover: #6E9E6E;
  --clr-secondary:  #6E9E6E;
  --clr-accent:     #82B882;
  --clr-accent-soft:#A8D8A8;
  --clr-success:    #82B882;
  --clr-danger:     #ef4444;

  --grad-primary:   linear-gradient(135deg, #6E9E6E 0%, #82B882 100%);
  --grad-purple:    linear-gradient(135deg, #5A8A5A 0%, #82B882 100%);
  --grad-hero:      radial-gradient(ellipse 80% 60% at 50% 10%, rgba(130, 184, 130, 0.45) 0%, transparent 70%), linear-gradient(135deg, #3A633A 0%, #5A8A5A 50%, #82B882 100%);

  /* ─── Green Theme Colors (Topbar, Footer & Wave) ─── */
  --clr-sea-blue:          #4A784A;
  --clr-sea-blue-scrolled: rgba(74, 120, 74, 0.95);
  --clr-sea-blue-mid:      #6E9E6E;
  --clr-sea-blue-aqua:     #82B882;
  --clr-sea-blue-dark:     #2E502E;

  /* ─── Dark anchor tones — used by nav / hero / footer / wave ─── */
  --clr-dark:         #3A633A;
  --clr-dark-surface: #2E502E;

  /* ─── Overlay helper tint ─── */
  --overlay-tint:        rgba(130, 184, 130, 0.08);
  --overlay-tint-strong: rgba(130, 184, 130, 0.18);

  /* ─── Text Colors (light-zone default) ─── */
  --txt-main:  #152e15;
  --txt-muted: #385938;
  --txt-dim:   #5b7d5b;

  /* ─── Typography ─── */
  --font:       'LINE Seed Sans TH', 'Kanit', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --fs-xs:  .75rem;
  --fs-sm:  .875rem;
  --fs-base:1rem;
  --fs-lg:  1.125rem;
  --fs-xl:  1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: 2.25rem;
  --fs-5xl: 3rem;

  /* ─── Spacing (4px grid) ─── */
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem;
  --sp-4: 1rem;    --sp-6: 1.5rem; --sp-8: 2rem;
  --sp-10:2.5rem;  --sp-12:3rem;   --sp-16:4rem;
  --sp-20:5rem;    --sp-24:6rem;

  /* ─── Shape ─── */
  --r-sm: .375rem;
  --r-md: .75rem;
  --r-lg: 1rem;
  --r-xl: 1.5rem;
  --r-full: 9999px;

  /* ─── Shadows ─── */
  --shadow-sm:  0 2px 8px rgba(74, 120, 74,.08);
  --shadow-md:  0 10px 28px rgba(74, 120, 74,.12);
  --shadow-glow:0 10px 30px rgba(110, 158, 110,.35);

  /* ─── Transitions ─── */
  --tr-fast:   all .18s cubic-bezier(.4,0,.2,1);
  --tr-normal: all .3s cubic-bezier(.4,0,.2,1);

  /* ─── Layout ─── */
  --container: 1200px;
  --nav-h:     72px;
}