/* New Rural Design System — tokens v1.1 · single source of truth for website + CMS theme */
:root {
  /* surfaces (light two-tone + one accent tint — no black surfaces) */
  --surface-1: #F8F6F0;   /* cream — default page */
  --surface-2: #EAE1CF;   /* sand — alternate section */
  --surface-3: #DCCFB6;   /* sand deep — statement / footer */
  --surface-tint: #EFE1D3;/* clay tint — accent section (= color-primary-soft) */
  --surface-card: #FCFAF6;/* card on any surface */

  /* text */
  --text: #221D18;        /* primary (warm near-black, text only) */
  --text-2: #5C5248;      /* secondary */
  --text-3: #8A7F73;      /* tertiary / captions */
  --text-on-photo: #F1EEE7;

  /* brand colors */
  --color-primary: #7D563F;        /* clay — buttons, links, selected state, focus ring (AA on light: 6.9:1) */
  --color-primary-hover: #6A4834;
  --color-primary-soft: #EFE1D3;   /* tinted surface / badge */
  --color-on-primary: #F1EEE7;
  --color-secondary: #C29F5C;      /* gold — labels over photos, markers, highlight lines. NOT for text on light, NOT for buttons */
  --color-tertiary: #496349;       /* moss — nature category, success */

  /* semantic aliases (kept for existing CSS) */
  --accent: var(--color-secondary);
  --accent-2: var(--color-primary);
  --positive: var(--color-tertiary);
  --line: #DDD9CF;
  --line-strong: #C9C0AF;

  /* photo overlays (warm brown, never black) */
  --veil-a: rgba(58,49,41,.03);
  --veil-b: rgba(58,49,41,.15);
  --veil-c: rgba(58,49,41,.78);
  --card-veil: linear-gradient(180deg, rgba(58,49,41,0) 55%, rgba(58,49,41,.72) 100%);

  /* typography */
  --font-display: "Anuphan", "IBM Plex Sans Thai", sans-serif;
  --font-body: "IBM Plex Sans Thai", "Anuphan", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --fs-display: clamp(4rem, 11vw, 9.6rem);
  --fs-h1: clamp(2.6rem, 6vw, 5rem);
  --fs-h2: clamp(2.3rem, 5vw, 4.2rem);
  --fs-h3: 1.3rem;
  --fs-lead: 1.15rem;
  --fs-body: 1rem;
  --fs-small: .9rem;
  --fs-label: 11px;
  --lh-tight: 1.08;
  --lh-body: 1.65;
  --ls-display: -.02em;
  --ls-label: .28em;

  /* spacing (4px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 112px; --sp-11: 150px;
  --section-y: var(--sp-10);
  --section-y-lg: var(--sp-11);
  --container: 1200px;
  --gutter: 20px;
  --gutter-lg: 40px;

  /* shape & elevation */
  --radius: 4px;
  --radius-pill: 999px;
  --shadow-soft: 0 24px 60px -30px rgba(66,55,40,.45);

  /* motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 300ms; --dur-base: 500ms; --dur-slow: 700ms; --dur-reveal: 1000ms;
  --reveal-y: 28px;
}