/* Zovrel design tokens — values read from Figma variables (file UeyjrlWMIC4djrVAihNn5v) */

:root {
  /* ---- colour ---- */
  --primary:    #1d5c55;  /* scrub green  */
  --ember:      #1d5c55;  /* alias used by Figma layers */
  --copper:     #124540;  /* pressed / hover green */
  --signal:     #db9b2b;  /* iodine amber — the only accent */
  --flame:      #db9b2b;  /* alias */

  --dark:       #1e2a2b;
  --dark-2:     #283637;
  --dark-rule:  #3c4c4d;

  --paper:      #f5f1ea;
  --paper-2:    #e8e2d6;
  --paper-3:    #fbf9f5;
  --rule:       #d8d1c3;

  --ink:        #1d2427;
  --ink-2:      #475155;
  --ink-3:      #768185;

  --on-dark:    #f5f1ea;
  --on-dark-2:  #b5c2c1;

  /* ---- type families ---- */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Bricolage Grotesque is variable — the design pins these axes */
  --display-axes: "opsz" 14, "wdth" 100;

  /* ---- layout ---- */
  --page-max: 1440px;
  --gutter: clamp(20px, 8.333vw, 120px);  /* 120px at the 1440 desktop frame */
  --header-h: 124px;                      /* utility bar 36 + main bar 88 */
}

@media (max-width: 1023px) {
  :root {
    --gutter: 20px;
    --header-h: 64px;
  }
}