/*
 * Machoah design tokens.
 *
 * Every value here comes from the design handoff. Nothing in the rest of the
 * stylesheet layer should contain a raw hex value -- if a colour is needed that
 * is not in this file, it belongs in this file first.
 */

:root {
  /* --- Green: primary brand ------------------------------------------- */
  --green-900: #0C1410;  /* footer background */
  --green-800: #0E3B2B;  /* utility bar, hero right panel, primary hover */
  --green-700: #14513C;  /* PRIMARY: buttons, links, active states */
  --green-600: #1C6349;  /* decorative hero circle */
  --green-100: #F2F6F0;  /* selected radio / chip background */

  /* --- Ink: text on light surfaces ------------------------------------ */
  --ink-900: #17251F;    /* headings, prices, dark cards */
  --ink-700: #25352C;    /* body text */
  --ink-500: #55645B;    /* secondary text, labels, meta */
  --ink-400: #7B8880;    /* tertiary, strike-through prices, placeholders */
  --ink-300: #A9B3AC;    /* breadcrumb separators */

  /* --- Mint: text on DARK surfaces. Not interchangeable with ink. ------ */
  --mint-200: #A9B5AD;   /* secondary text on footer and dark cards */
  --mint-300: #B4C7BB;   /* body copy on the green hero */
  --mint-400: #C6D2C9;   /* footer trust badge text */
  --mint-500: #CBD9CF;   /* utility bar text */

  /* --- Gold: accent ---------------------------------------------------- */
  --gold-500: #C9A227;   /* cart badge, promo tags, sale CTA */
  --gold-400: #DDB633;   /* gold button hover */
  --gold-300: #E3CE85;   /* values on dark cards, footer headings */
  --gold-200: #F0E4C0;   /* utility bar highlight, badge text on green */
  --gold-ink: #8E6A12;   /* gold-adjacent text needing AA on light */

  /* --- Sale / urgency --------------------------------------------------- */
  --sale-600: #B23A20;   /* star ratings, % off, sale tags, eyebrows */
  --sale-800: #8E2A13;   /* sale text on tinted background */
  --sale-100: #F6E3DE;   /* "you save" pill, clearance card */

  /* --- Cream: surfaces --------------------------------------------------- */
  --cream-50:  #FAF8F3;  /* page background, input fills */
  --cream-100: #FCFAF6;  /* product card surface */
  --cream-200: #F5F1E8;  /* promise box, PDP thumbnails */
  --cream-300: #EFE7D8;  /* sand blocks */
  --cream-400: #EDEAE2;  /* outer page frame */

  /* --- Borders ----------------------------------------------------------- */
  --border-100: #F0EBE0; /* hairline dividers, image well borders */
  --border-200: #E8E1D3; /* DEFAULT card border */
  --border-300: #E4DDCE; /* header bottom border */
  --border-400: #D8D0BE; /* input borders, secondary buttons */
  --border-500: #C4CCC6; /* unchecked checkbox / radio */

  --surface: #FFFFFF;

  /* --- Type -------------------------------------------------------------- */
  --font-display: 'Cabin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Container query units keep components portable across the shell width. */
  --h1-hero: clamp(28px, 3.6cqw, 44px);
  --h1-page: clamp(23px, 2.6cqw, 32px);
  --h1-pdp:  clamp(23px, 2.8cqw, 34px);
  --h2-section: clamp(21px, 2.2cqw, 27px);
  --price-pdp: clamp(28px, 3cqw, 36px);

  /* --- Space, radius, shadow --------------------------------------------- */
  --gutter: 16px;
  --section-gap: 30px;

  --r-badge: 4px;
  --r-control: 8px;
  --r-card: 12px;
  --r-block: 14px;
  --r-pill: 99px;

  --shadow-card: 0 6px 16px rgba(23, 37, 31, .08);
  --shadow-menu: 0 18px 34px rgba(23, 37, 31, .12);
  --shadow-hero-card: 0 18px 34px rgba(0, 0, 0, .28);

  --t-fast: 150ms ease;
  --t-slow: 200ms ease;

  /*
   * Width of the content shell.
   *
   * The design was drawn at 1440. Capping there leaves 240px of --cream-400
   * down each side of a 1920 monitor, which reads as the page not fitting, so
   * the shell runs to 1760 and the grids below add columns to fill it. Below
   * 1440 nothing changes: every count and tile size still matches the handoff.
   */
  --shell: 1760px;

  /*
   * Column floors used above --wide-from. The handoff's max(px, %) pattern
   * pins column COUNT at any width -- the percentage grows with the container,
   * so 1920px produced the same 5 tiles at 369px each instead of more tiles at
   * the designed size. Above the breakpoint these fixed floors take over and
   * the count grows instead of the tiles.
   */
  --wide-from: 1200px;
  --col-tile: 230px;      /* 5 across at 1440, 7 at 1760 */
  --col-result: 240px;    /* 4 across at 1440, 5 at 1760 */
  --col-concern: 160px;   /* handoff table only -- the concern grid now states
                             its column count directly, see home.css */

  /*
   * PDP gallery cap. The pack shots are 1200px originals, but a main image
   * larger than this is bigger than the bottle is ever shown at and pushes the
   * buy box below the fold.
   */
  --pdp-gallery: 360px;
}

/*
 * Condition tile palette. Eight background / heading / meta triples, each pair
 * AA-compliant. Applied by slug from the health-concern taxonomy.
 */
:root {
  --c-bone-bg:      #DCE3EC; --c-bone-fg:      #2C4665; --c-bone-meta:      #3F5470;
  --c-immune-bg:    #DBE7D4; --c-immune-fg:    #2A5432; --c-immune-meta:    #35563C;
  --c-digestion-bg: #EFDCD1; --c-digestion-fg: #82412A; --c-digestion-meta: #7A4326;
  --c-hair-bg:      #EEDCE3; --c-hair-fg:      #7C3355; --c-hair-meta:      #743B58;
  --c-brain-bg:     #E1DCEA; --c-brain-fg:     #4A3A69; --c-brain-meta:     #4A3E6B;
  --c-joint-bg:     #EDE2C7; --c-joint-fg:     #6F5322; --c-joint-meta:     #67512A;
  --c-eye-bg:       #DAE6E9; --c-eye-fg:       #28535B; --c-eye-meta:       #325A62;
  --c-liver-bg:     #E3E7D3; --c-liver-fg:     #4E5A2B; --c-liver-meta:     #4C5633;
}