/* ============================================================
   TREY design tokens
   Merged from the TREY design system (colors / typography /
   spacing / effects), with the landing page's own overrides:
   moss-deep #224323 and DM Sans as the sans stack.
   ============================================================ */
:root {
  /* ---- Color: base ---- */
  --espresso: #211711;        /* ink — deep espresso */
  --moss-deep: #224323;       /* dark section surface (page override) */
  --moss-raised: #41522f;     /* raised element on moss */
  --moss: #5a6b44;            /* mid moss */
  --moss-light: #e9ebda;      /* light textured green */
  --coffee: #6b4b33;          /* warm coffee brown */
  --cream: #fff6dc;           /* page surface */
  --cream-line: #e6ddc6;      /* hairline */
  --leaf: #d9de9a;            /* soft leaf accent */
  --leaf-deep: #c9d07e;
  --paper: #ffffff;
  --placeholder: #c4c4c4;     /* photo placeholder fill */

  /* ---- Color: semantic ---- */
  --surface-page: var(--cream);
  --surface-card: var(--paper);
  --surface-dark: var(--moss-deep);
  --surface-veil: rgba(33, 23, 17, 0.06);
  --text-primary: var(--espresso);
  --text-secondary: var(--coffee);
  --text-on-dark: #ffffff;
  --text-on-accent: var(--espresso);
  --hairline: var(--cream-line);
  --hairline-on-dark: rgba(255, 255, 255, 0.18);
  --accent: var(--leaf);
  --cta-dark: #224323;        /* filled pill on light surfaces (page override) */
  --cta-light: #ffffff;       /* filled pill on photography */

  /* ---- Typography ---- */
  --font-sans: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Playfair Display", ui-serif, Georgia, serif;

  --text-hero-size: 160px;
  --text-hero-weight: 700;
  --text-hero-leading: 0.9;
  --text-hero-tracking: -0.05em;

  --text-display-size: 80px;
  --text-display-weight: 600;
  --text-display-leading: 1;

  --text-wordmark-size: 40px;
  --text-wordmark-tracking: -0.04em;
  --text-wordmark-leading: 0.8;

  --text-h3-size: 32px;
  --text-sub-size: 24px;

  --text-body-size: 18px;
  --text-body-leading: 20px;
  --text-body-tracking: -0.02em;
  --text-label-leading: 1.1;

  --text-script-size: 18px;

  /* ---- Spacing / radii ---- */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 10px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 52px;
  --space-8: 100px;

  --page-gutter: 52px;
  --page-width: 1440px;

  --radius-section: 52px;
  --radius-card: 32px;
  --radius-panel: 24px;
  --radius-badge: 10px;
  --radius-pill: 100px;

  /* ---- Effects ---- */
  --shadow-card: 0px 4px 10px 0px rgba(0, 0, 0, 0.04);
  --shadow-pop: 0px 4px 10px 0px rgba(0, 0, 0, 0.14);
  --shadow-deep: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);

  --ring-offset: 4px;   /* padding between dashed ring and pill */

  --texture-grid-size: 38px;
  --texture-grid-line: rgba(255, 255, 255, 0.1);
}