/* Stocks & Green Grow: core styles and the style of each area of the site.

   Used by grow.stocksandgreen.com (every page) and by the Studio preview. Change a value here
   and the whole site follows: every guide, every article, every list. Nothing is rebuilt.

   1. CORE: the brand palette, fonts and shapes. Change these for a site-wide redesign.
   2. AREAS: each part of the site (home page, Growing Guides, Know-How, Garden Tours, Seasonal
      Tips) has its own set of the same settings. They all start as the core values, so the site
      looks the same everywhere; change a line in one area to give that area its own look.
      An area's settings apply to its pages and to its cards wherever they appear (for example,
      a Know-How card on the home page uses the Know-How style). */

/* ---------------------------------------------------------------- 1. CORE */
:root {
  /* Brand colours */
  --brand-green: #4F8823;          /* Main Green */
  --brand-green-dark: #3d6a1b;
  --brand-purple: #540663;         /* Accent Dark Purple */
  --brand-purple-hover: #6b0a7e;
  --brand-paper: #EFF7EF;          /* Background */
  --brand-white: #ffffff;
  --brand-ink: #1f2a1c;            /* text */
  --brand-muted: #55644f;          /* quieter text */
  --brand-line: #d3e3d0;           /* borders */

  /* Fonts: Assistant for text; handwritten Jenna Sue (English only: it has no accented letters,
     so other languages use Caveat) */
  --brand-sans: "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand-hand: "Jenna Sue", "Segoe Script", cursive;
  --brand-hand-intl: "Caveat", "Segoe Script", cursive;

  /* Article layout on desktop (Studio's Settings page overrides these for the whole site) */
  --article-width: 1100px;         /* the widest an article gets */
  --text-width: 760px;             /* full-width text (introduction, text blocks, boxes) is kept to this */
  --beside-photo: 60%;             /* share of the width a photo takes in "Beside text" sections */

  /* Shapes */
  --brand-radius: 14px;            /* cards and boxes */
  --brand-radius-photo: 12px;      /* photos inside the margins */

  /* Fixed meanings (the same in every area) */
  --sow-in: #d9952b;               /* calendar: sow indoors */
  --sow-out: #4F8823;              /* calendar: sow outdoors */
  --flower: #8d3a9c;               /* calendar: flowering */
  --harvest: #8a5a2b;              /* calendar: harvest */
  --cal-empty: #e0ebdf;
  --note-bg: #fff4e6;              /* safety notes */
  --note-line: #f0c48a;
  --note-ink: #8a4b00;
  color-scheme: light;
}
html[data-lang]:not([data-lang="en"]) { --brand-hand: var(--brand-hand-intl); }

/* ---------------------------------------------------------------- 2. AREAS
   The settings every area has:
     --main        top bar, highlights, tip boxes, selected buttons
     --main-dark   section tabs bar, headings, standfirsts
     --accent      handwritten titles, links, buttons, labels, step numbers
     --accent-hover
     --page        page background
     --card        cards and boxes
     --ink, --muted, --line   text, quieter text, borders
     --sans, --hand           text font, handwritten font
     --radius, --radius-photo corners */

/* Defaults: every Grow page, and the article preview in Studio (Studio's own screens have their own styles) */
html[data-section], .ga-wrap {
  --main: var(--brand-green); --main-dark: var(--brand-green-dark);
  --accent: var(--brand-purple); --accent-hover: var(--brand-purple-hover);
  --page: var(--brand-paper); --card: var(--brand-white);
  --ink: var(--brand-ink); --muted: var(--brand-muted); --line: var(--brand-line);
  --sans: var(--brand-sans); --hand: var(--brand-hand);
  --radius: var(--brand-radius); --radius-photo: var(--brand-radius-photo);
}

/* Home page */
html[data-section="home"] {
  --main: var(--brand-green); --main-dark: var(--brand-green-dark);
  --accent: var(--brand-purple); --accent-hover: var(--brand-purple-hover);
  --page: var(--brand-paper); --card: var(--brand-white);
  --ink: var(--brand-ink); --muted: var(--brand-muted); --line: var(--brand-line);
  --sans: var(--brand-sans); --hand: var(--brand-hand);
  --radius: var(--brand-radius); --radius-photo: var(--brand-radius-photo);
}

/* Growing Guides */
html[data-section="guides"], .feed-guides {
  --main: var(--brand-green); --main-dark: var(--brand-green-dark);
  --accent: var(--brand-purple); --accent-hover: var(--brand-purple-hover);
  --page: var(--brand-paper); --card: var(--brand-white);
  --ink: var(--brand-ink); --muted: var(--brand-muted); --line: var(--brand-line);
  --sans: var(--brand-sans); --hand: var(--brand-hand);
  --radius: var(--brand-radius); --radius-photo: var(--brand-radius-photo);
}

/* Know-How */
html[data-section="knowhow"], .feed-know-how, .ga-knowhow {
  --main: var(--brand-green); --main-dark: var(--brand-green-dark);
  --accent: var(--brand-purple); --accent-hover: var(--brand-purple-hover);
  --page: var(--brand-paper); --card: var(--brand-white);
  --ink: var(--brand-ink); --muted: var(--brand-muted); --line: var(--brand-line);
  --sans: var(--brand-sans); --hand: var(--brand-hand);
  --radius: var(--brand-radius); --radius-photo: var(--brand-radius-photo);
}

/* Garden Tours */
html[data-section="tours"], .feed-garden-tours, .ga-gardentour {
  --main: var(--brand-green); --main-dark: var(--brand-green-dark);
  --accent: var(--brand-purple); --accent-hover: var(--brand-purple-hover);
  --page: var(--brand-paper); --card: var(--brand-white);
  --ink: var(--brand-ink); --muted: var(--brand-muted); --line: var(--brand-line);
  --sans: var(--brand-sans); --hand: var(--brand-hand);
  --radius: var(--brand-radius); --radius-photo: var(--brand-radius-photo);
}

/* Seasonal Tips */
html[data-section="seasonal"], .feed-seasonal-tips, .ga-seasonal {
  --main: var(--brand-green); --main-dark: var(--brand-green-dark);
  --accent: var(--brand-purple); --accent-hover: var(--brand-purple-hover);
  --page: var(--brand-paper); --card: var(--brand-white);
  --ink: var(--brand-ink); --muted: var(--brand-muted); --line: var(--brand-line);
  --sans: var(--brand-sans); --hand: var(--brand-hand);
  --radius: var(--brand-radius); --radius-photo: var(--brand-radius-photo);
}

/* Search results show cards from every area, each in its own area's style (see above). */

/* From Studio's Settings page */
:root { --article-width: 1100px; --text-width: 760px; --beside-photo: 60%; }