/* ============================================================
   DESIGN TOKENS — the only file that defines how the site LOOKS.
   Rebrands, color changes, "make it more luxurious" = edit here.
   Layout/structure lives in main.css and rarely changes.
   ============================================================ */

:root {
  /* Brand color — the one color that defines the client */
  --brand:        #c8a24a;   /* buttons, links, accents */
  --brand-ink:    #1a1407;   /* text on top of --brand */
  --brand-soft:   #f7f0df;   /* tinted backgrounds */

  /* Neutrals */
  --ink:          #1c1b18;   /* body text */
  --ink-muted:    #6b675e;   /* secondary text */
  --paper:        #ffffff;   /* page background */
  --paper-alt:    #faf7f0;   /* alternating section background */
  --line:         #e7e2d6;   /* borders, dividers */

  /* Dark footer / CTA band */
  --night:        #171512;
  --night-ink:    #f5f1e8;

  /* Typography
     NOTE for Thai-language sites: swap to a stack that covers Thai,
     e.g. "Noto Sans Thai", and update the Google Fonts <link> in index.html. */
  --font-display: "Fraunces", Georgia, serif;     /* headings */
  --font-body:    "Inter", system-ui, sans-serif; /* everything else */
  --text-base:    1rem;
  --text-scale:   1.25;      /* heading size ratio */

  /* Shape & spacing */
  --radius:       10px;      /* cards, buttons, images */
  --space:        1rem;      /* base spacing unit */
  --section-pad:  clamp(3.5rem, 8vw, 6.5rem);
  --container:    1120px;

  /* Effects */
  --shadow:       0 10px 30px rgb(0 0 0 / 0.08);
  --hero-overlay: linear-gradient(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.55));
}