/* ==========================================================================
   Jobson Garden — Design Tokens
   Single source of truth for colour, type and spacing.
   Do not hardcode colour values anywhere else.

   Palette updated 2026-09-01 from the tea-house reference:
   white canvas, deep forest green, bright leaf green, charcoal ink.
   OKLCH values computed from the hex; contrast verified against WCAG 2.1 AA.
   ========================================================================== */

:root {

  /* --- Colour ---------------------------------------------------------- */

  /* Surfaces */
  --background:         oklch(1 0 0);                  /* #FFFFFF  page canvas */
  --card:               oklch(1 0 0);                  /* #FFFFFF  cards */
  --secondary:          oklch(0.969 0.015 126.8);      /* #F2F7EC  tinted band */
  --border:             oklch(0.919 0.026 128.8);      /* #DFE8D6  hairlines */

  /* Ink */
  --foreground:         oklch(0.244 0.020 148);        /* #1A231B  body text, dark bands */
  --muted-foreground:   oklch(0.511 0.023 142.9);      /* #5F6A5E  secondary text */

  /* Greens */
  --primary:            oklch(0.439 0.084 149.5);      /* #2C5F38  deep forest */
  --primary-foreground: oklch(1 0 0);                  /* #FFFFFF  on primary */
  --leaf:               oklch(0.633 0.156 135.7);      /* #5C9E33  bright leaf */
  --accent:             oklch(0.847 0.131 125.2);      /* #B9DC7A  light accent */
  --accent-foreground:  oklch(0.241 0.042 136);        /* #16240F  on accent */

  /* ---------------------------------------------------------------------
     CONTRAST RULES — these are measured, not guesses.

       foreground   on background   16.15   AA   any size
       primary      on background    7.50   AA   any size
       muted-fg     on background    5.66   AA   any size
       primary-fg   on primary       7.50   AA   any size
       accent       on primary       4.85   AA   any size
       accent-fg    on accent       10.50   AA   any size
       leaf         on background    3.28   AA-large ONLY
       border       on background    1.26   decorative only

     --leaf is for large display text (24px+, or 18.7px+ bold), icons and
     graphics. Never small body text — use --primary for that.

     --border is a decorative hairline. If a form input or other interactive
     control ever needs a visible edge, it needs 3:1 — use --muted-foreground.
     --------------------------------------------------------------------- */


  /* --- Type ------------------------------------------------------------
     CONFIRMED 2026-09-02: (c) Comfortaa for display — the logo's own
     typeface. Chosen by the client, who did not want the sharp serif
     edges of the Cormorant Garamond direction. Headings now match the
     wordmark exactly; DM Sans stays for body, where Comfortaa's wide
     round forms cost too much reading speed at paragraph sizes.

     Rejected: (a) Cormorant Garamond + DM Sans, (b) General Sans + Inter.

     Comfortaa is geometric and runs wide, so headings carry a slightly
     tighter track and a heavier weight than a serif would need — see
     the h1-h3 rule in main.css.
     --------------------------------------------------------------------- */

  --font-display: "Comfortaa", ui-rounded, "Segoe UI Rounded", "Trebuchet MS", sans-serif;
  --font-body:    "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* DM Mono is DM Sans's sibling — same superfamily, so the two share
     proportions and sit together without clashing. It carries the technical
     register: eyebrows, the chapter rail, the comparison table, small print.
     Never body copy — mono at paragraph length costs reading speed. */
  --font-mono:    "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs:   0.75rem;    /* 12px  eyebrows, captions */
  --text-sm:   0.875rem;   /* 14px  secondary */
  --text-base: 1rem;       /* 16px  body */
  --text-lg:   1.125rem;   /* 18px  lede */
  --text-xl:   1.5rem;     /* 24px  small headings */
  --text-2xl:  2.25rem;    /* 36px  section headings */
  --text-3xl:  3.5rem;     /* 56px  page headings */
  --text-4xl:  4.5rem;     /* 72px  hero */

  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-body:  1.6;
  --leading-loose: 1.75;

  --tracking-wide: 0.2em;  /* uppercase eyebrows */


  /* --- Layout ----------------------------------------------------------- */

  --wrap:   80rem;         /* 1280px content container */
  --gutter: 1.25rem;

  /* Height of the photographic banner at the top of an inner page. One value
     for About, Services and Garden Tips — they each carried their own before
     this and opened at three different heights. */
  --cover-h: clamp(19rem, 34vw, 28rem);
  --radius: 0.625rem;
  --radius-pill: 999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --section-y: var(--space-24);


  /* --- Motion -----------------------------------------------------------
     Brand brief: small and subtle. Nothing showy.
     --------------------------------------------------------------------- */

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration:      300ms;
  --duration-slow: 600ms;
}

@media (min-width: 1024px) {
  :root { --gutter: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
    --duration-slow: 0ms;
  }
}