/* ==========================================================================
   Hunnewell Technologies — design tokens (Signal Flags theme)
   Source of truth for color, type, spacing and borders.
   Mirrors tokens.json. Change values here, not in components.
   ========================================================================== */

:root {
  /* ---- Color: grounds ---------------------------------------------------- */
  --hw-bunting:      #F7F6F2;  /* page ground (warm off-white, "flag bunting") */
  --hw-white:        #FFFFFF;  /* card / product-row surface */
  --hw-navy-deep:    #0D1B38;  /* dark band (About) */

  /* ---- Color: ink -------------------------------------------------------- */
  --hw-navy:         #14306B;  /* primary ink, all structural borders, buttons */

  /* ---- Color: signal (from the International Code of Signals) ------------ */
  --hw-flag-blue:    #1F4E9D;  /* flag fills only (N, E, W, S) */
  --hw-flag-red:     #D52B1E;  /* flag fills + small mono labels / accents */
  --hw-flag-yellow:  #F6C700;  /* flag fills + primary CTA fill + Contact band. NEVER as text on light grounds */
  --hw-flag-black:   #111111;  /* flag fills only (L) */

  /* ---- Typography -------------------------------------------------------- */
  --hw-font-sans: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --hw-font-mono: "Red Hat Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Display: company wordmark in the hero */
  --hw-fs-display:      clamp(52px, 7.6vw, 104px);
  --hw-lh-display:      0.9;
  --hw-ls-display:      -0.04em;
  /* Second line of the name: "Technologies" */
  --hw-fs-display-sub:  clamp(32px, 4.6vw, 62px);
  --hw-ls-display-sub:  -0.03em;
  /* Section titles: Work / Lab / About */
  --hw-fs-h2:           40px;
  --hw-ls-h2:           -0.03em;
  /* Product names */
  --hw-fs-h3:           32px;
  --hw-ls-h3:           -0.025em;
  /* Lab item names */
  --hw-fs-h4:           20px;
  --hw-ls-h4:           -0.015em;
  /* Text */
  --hw-fs-lead:         19px;   /* hero description */
  --hw-fs-about:        18px;   /* About paragraph */
  --hw-fs-body:         17px;
  --hw-fs-small:        15px;
  --hw-lh-body:         1.5;
  /* Mono labels (always uppercase) */
  --hw-fs-label:        13px;
  --hw-ls-label:        0.13em;
  --hw-fs-label-lg:     13px;   /* "Est. Newton, Mass." */
  --hw-ls-label-lg:     0.14em;
  --hw-fs-micro:        11px;   /* panel captions */
  --hw-ls-micro:        0.08em;
  /* Stats inside product rows */
  --hw-fs-stat:         17px;

  --hw-fw-regular: 400;
  --hw-fw-medium:  500;
  --hw-fw-bold:    700;
  /* One bold mark per page (the wordmark). Headings and controls sit at medium. */
  --hw-fw-display: var(--hw-fw-bold);
  --hw-fw-heading: var(--hw-fw-medium);

  /* ---- Layout ------------------------------------------------------------ */
  --hw-maxw:        1240px;
  --hw-gutter:      28px;
  --hw-section-y:   72px;   /* Lab, About vertical padding */
  --hw-section-y-sm: 48px;  /* Work heading top padding */
  --hw-gap-rows:    32px;   /* space between product rows */

  /* ---- Lines & shapes ---------------------------------------------------- */
  --hw-rule:        2px solid var(--hw-navy);    /* all structure */
  --hw-rule-tag:    1.5px solid var(--hw-navy);  /* status tags */
  --hw-rule-tag-dev: 1.5px dashed var(--hw-navy);/* "in development" tag */
  --hw-radius:      0;                           /* no rounded corners anywhere */
  --hw-shadow:      none;                        /* no shadows in the site frame */

  /* ---- Flags ------------------------------------------------------------- */
  --hw-flag-ratio:  1.5;                          /* 3:2 */
  /* Nine flags always fit on ONE line (they must hang from the header rule): */
  --hw-flag-w-hero: clamp(28px, calc((100vw - 2 * var(--hw-gutter) - 8 * var(--hw-flag-gap)) / 9), 44px);
  --hw-flag-cord:   16px;                         /* cord length below the header rule */
  --hw-flag-gap:    8px; 
  --hw-flag-w-row:  40px;                         /* flag beside each product */
  --hw-flag-w-nav:  32px;                         /* header home flag */

  /* ---- Motion ------------------------------------------------------------ */
  --hw-ease: cubic-bezier(.2, .7, .2, 1);
  --hw-dur:  180ms;
}