/*
 * Urban Shop design tokens.
 *
 * Every value here was measured off the rendered reference site in headless
 * Chrome (see docs/reference-spec.md), not read from its stylesheet — the two
 * disagree, most visibly on heading weight.
 *
 * This file is the single place to change a colour, a size or a rhythm value.
 * Component stylesheets and sd.css consume these variables and should not
 * hard-code a literal that exists here.
 *
 * Loaded before sd.css and before every component stylesheet.
 */

:root {
  /* ── Colour ─────────────────────────────────────────────────────────────
   * Measured on the homepage: #4c4d4f paints 210 elements (all page copy),
   * #fff 73, #000 33. The green is the reference's commerce green, used for
   * add-to-cart and every "proceed" button.
   */
  --sd-black:        #000;
  --sd-text:         #4c4d4f;   /* page copy, card text, headings          */
  --sd-text-strong:  #000;      /* body default, menu links                */
  --sd-muted:        #6e6e6e;
  --sd-white:        #fff;

  --sd-buy:          #009933;   /* add to cart / proceed                   */
  --sd-buy-hover:    #026e23;
  --sd-sale:         #f00;      /* special price                           */

  --sd-demo-bg:      #ffd400;   /* demonstration notice bar                */
  --sd-demo-fg:      #000;      /* 14.6:1 on the amber above                */

  --sd-bar:          #f4f4f4;   /* menu bar, quiet buttons, about block    */
  --sd-image-bg:     #f6f6f6;   /* product image well                      */
  --sd-surface:      #f0f0f0;
  --sd-rule:         #999;      /* block divider                           */
  --sd-rule-light:   #e3e3e3;

  --sd-btn-bg:       var(--sd-black);
  --sd-btn-fg:       var(--sd-white);
  --sd-btn-hover:    #4c4d4f;   /* measured: #000 → #4c4d4f                */
  --sd-btn-quiet-bg: var(--sd-bar);
  --sd-btn-quiet-fg: #484848;

  /* ── Type ───────────────────────────────────────────────────────────────
   * Base 12px/17px with .09em tracking (= 1.08px at 12px), Arial.
   * The em scale below reproduces the measured rendered sizes.
   */
  --sd-font:         Arial, Helvetica, sans-serif;
  --sd-fs-base:      12px;
  --sd-lh-base:      17px;
  --sd-tracking:     .09em;

  --sd-fs-h1:        1.95em;   /* 23.4px */
  --sd-fs-h2:        1.55em;   /* 18.6px */
  --sd-fs-h3:        1.3em;    /* 15.6px */
  --sd-fs-h4:        1.16em;   /* 13.92px */
  --sd-fs-h3-tight:  1.17em;   /* 14.04px — the reference's inline h3 */
  --sd-fs-nav:       1.2em;    /* 14.4px */
  --sd-fs-btn:       1.3em;    /* 15.6px */

  /* Measured rendered weights — the reference's own CSS says 100, its pixels
     say otherwise on every block heading. */
  --sd-fw-h1:        100;
  --sd-fw-block:     600;      /* block titles: MOST POPULAR, SHOP OUR …  */
  --sd-fw-card:      700;      /* price, product-name headings            */

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --sd-container:    1130px;   /* measured .content__container at 1440     */
  --sd-gutter:       15px;     /* measured side padding at 390             */
  --sd-block-gap:    10px;     /* measured margin-bottom on every block    */
  --sd-cat-sidebar:  290px;    /* category page left rail                  */

  /* ── Grid ───────────────────────────────────────────────────────────── */
  --sd-card-col-gap: 10.9px;
  --sd-card-row-gap: 20px;
  --sd-per-page:     60;       /* products per page (documentation only)   */

  /* ── Header ─────────────────────────────────────────────────────────── */
  --sd-utility-h:    37px;
  --sd-headermain-h: 88px;
  --sd-menubar-h:    41px;
  --sd-demobar-h:    28px;     /* demonstration notice, shown at every width */
  --sd-header-h:     153px;    /* demo 28 + utility 37 + main 88            */
  --sd-header-h-sm:  147px;    /* demo 28 + measured 119 at 390             */
  --sd-buybar-h:     69px;     /* mobile sticky add-to-cart bar             */

  /* ── Shape and motion ───────────────────────────────────────────────────
   * The reference is effectively un-animated: its dominant transition is the
   * bare keyword `all`, which resolves to 0s. Layout blocks are square; the
   * only radii belong to form controls and commerce buttons.
   */
  --sd-radius:       0;
  --sd-radius-ctl:   5px;
  --sd-transition:   none;
}