/* Baldosa brand tokens. Source of truth for colour, type and space.
   build.mjs copies this file to public/assets/tokens.css; edit it here.

   The five pigments are the ones in a baldosa hidraulica: lime white, carbon
   black, iron-oxide red, ochre and a chromium green. The site uses three of
   them for its surfaces (cal, carbon, almagre); ochre and green live only
   inside drawings of tiles. */

:root {
  /* pigments */
  --cal: #e5e1d9;
  --carbon: #1d1a17;
  --almagre: #8c2f2b;
  --ocre: #c4943c;
  --verde: #46584a;
  --cemento: #bab4aa;      /* the grey cement back of a tile */

  /* roles, light */
  --bg: var(--cal);
  --surface: #d9d4ca;      /* one step from the ground: fields, panels */
  --ink: var(--carbon);
  --muted: #5a544c;        /* 5.7:1 on --bg */
  --accent: var(--carbon); /* the one button is ink on paper */
  --accent-ink: var(--cal);
  --field: var(--almagre); /* the one saturated field */
  --field-ink: var(--cal); /* 6.3:1 on --field */
  --invert: var(--carbon); /* an inverted section */
  --invert-ink: var(--cal);
  --invert-muted: #a69f94;
  --paper: var(--cal);     /* slips and the reply card */
  --paper-ink: var(--carbon);

  /* type: one family, Archivo. The logo face (Ibarra Real Nova) exists only
     as outlines inside the wordmark SVG and is never loaded. */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --display-wdth: 62;
  --display-wght: 800;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);  /* 13-14px */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);    /* 17-19px */
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);      /* 20-26px */
  --step-head: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);           /* 40-88px */

  /* space */
  --margin: clamp(1rem, 2.2vw, 2rem);
  --gutter: clamp(0.75rem, 1.4vw, 1.5rem);
  --section: clamp(4.5rem, 11vw, 10rem);
  --radius: 0px;
  --strip-radius: 14px;    /* only the photograph inside the headline */

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-reveal: 800ms;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--carbon);
    --surface: #2a2621;
    --ink: var(--cal);
    --muted: #a69f94;      /* 6.6:1 on --bg */
    --accent: var(--cal);
    --accent-ink: var(--carbon);
    --field: #7a2724;      /* almagre, a shade deeper at night */
    --field-ink: var(--cal);
    --invert: #2a2621;
    --invert-ink: var(--cal);
    --invert-muted: #a69f94;
  }
}