/* Manos de Oro: design tokens for mdo.greenmaestro.com
   Source of truth: brand/master/DECISIONS.md (2026-10-09). Do not add colours, fonts or sizes here
   without changing DECISIONS.md first.
   "Una imprenta": one case of type, one rule, one engraved plate, flat ink on paper. */

/* ------------------------------------------------------------------ fonts (self-hosted, OFL)
   Paths are relative to this file: deploy tokens.css next to the assets/ folder (see BRIEF.md, Cloudflare). */
@font-face {
  font-family: "Ibarra Real Nova";
  src: url("assets/fonts/IbarraRealNova-VF.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ibarra Real Nova";
  src: url("assets/fonts/IbarraRealNova-Italic-VF.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("assets/fonts/AtkinsonHyperlegibleNext-VF.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("assets/fonts/AtkinsonHyperlegibleNext-Italic-VF.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
}

:root {
  /* ---------------------------------------------------------------- inks: "Dos tintas"
     Papel ~80%, sombra ~17%, grana ~2% (STOP or SEALED only), oro ~1% (wordmark shade only). */
  --papel:        #F1E8D4;  /* the ground of every page */
  --sombra:       #2E2219;  /* all text, la regla, symbols, numerals, solid fields, primary buttons */
  --grana:        #8F1D2C;  /* el alto, NO VÁLIDA, the seal. Never decoration, kickers, bullets or links */
  --oro:          #B08A3E;  /* the wordmark's shade (inside the SVG). Never text, rules or icons */

  /* reserves: the only other values allowed */
  --papel-hondo:  #E6DBC2;  /* secondary panels: cards, FAQ rows, code box, video mat */
  --sombra-suave: #685A4B;  /* secondary text: captions, metadata (5.5:1 on papel) */
  --verde-monte:  #3B5A3A;  /* ONLY inside the oficio tile icons (assets/icons/tile). Not a page colour */
  --cal:          #FBF7EE;  /* text on sombra or grana fields */

  /* roles (use these in components, not the raw inks) */
  --ground: var(--papel);
  --ink: var(--sombra);
  --ink-2: var(--sombra-suave);
  --panel: var(--papel-hondo);
  --on-ink: var(--cal);
  --stop: var(--grana);

  /* ---------------------------------------------------------------- type
     Ibarra = the institution speaks (headings, Ordenanza, lead lines, numerals).
     Atkinson = the crew acts (body, lists, buttons, labels, forms). Pinyon is not used on the site. */
  --serif: "Ibarra Real Nova", "Iowan Old Style", Palatino, Georgia, serif;
  --sans:  "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* phone first; the desktop step is in the media query below */
  --t-label: 1rem;      /* 16px  Atkinson 700 caps, tracking .14em: kickers, chips, el pie, lang switch */
  --t-small: 1rem;      /* 16px  captions, metadata (never below 16px) */
  --t-body:  1.125rem;  /* 18px  body on phones (never smaller) */
  --t-lead:  1.375rem;  /* 22px  Ibarra lead line under h1 */
  --t-h3:    1.25rem;   /* 20px  Atkinson 700: card titles, FAQ questions */
  --t-h2:    1.75rem;   /* 28px  Ibarra 700 */
  --t-h1:    2.5rem;    /* 40px  Ibarra 700 */
  --t-display: 2.75rem; /* 44px  Ibarra 700: the home page's opening line only */
  --t-cifra: 3rem;      /* 48px  Ibarra 700 numerals (1, 3, 10) */
  --t-verdict: 3rem;    /* 48px  VÁLIDA / NO VÁLIDA / REVOCADA */

  --lh-body: 1.55;
  --lh-tight: 1.1;
  --track-label: 0.14em;
  --track-verdict: 0.08em;

  /* ---------------------------------------------------------------- measure
     M = 48px (1/2 inch in print); m = M/6 = 8px. Every margin, gap and padding is a whole number of m. */
  --m: 8px;
  --M: 48px;
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s12: 96px;
  --gutter: var(--s2);              /* page side margin on phones (16px) */
  --page-max: 1120px;               /* 12 columns: 12 x 64px + 11 gutters x 32px */
  --col-gap: var(--s4);
  --text-max: 40rem;                /* ~68 characters of body text */
  --section-gap: var(--s8);         /* between sections; space, not lines */

  /* ---------------------------------------------------------------- strokes (three weights in the system)
     Heavy W = 2px on the web @1x: la regla, focus ring. Fine and engraved weights never appear on screen. */
  --w: 2px;
  --focus: 3px solid var(--sombra);
  --focus-offset: 3px;

  /* ---------------------------------------------------------------- the head and the wordmark
     Head = 2M tall on desktop; the wordmark's cap height = 1/3 M = 16px.
     The wordmark SVG's height is 1.165 x its cap height (raised DE + shade), so 16px caps = 19px tall image. */
  --head-h: 64px;           /* phones: 8m */
  --wordmark-h: 19px;       /* phones and desktop alike: caps 16px */
  --icon: 24px;             /* oficio symbol beside its word */
  --icon-lg: 40px;          /* oficio symbol in the home grid */
  --tap: 48px;              /* minimum touch target (1M) */
}

@media (min-width: 900px) {
  :root {
    --t-body: 1.25rem;    /* 20px */
    --t-lead: 1.625rem;   /* 26px */
    --t-h2: 2rem;         /* 32px */
    --t-h1: 3.5rem;       /* 56px */
    --t-display: 4.5rem;  /* 72px */
    --t-cifra: 4rem;      /* 64px */
    --t-verdict: 4rem;    /* 64px */
    --gutter: var(--M);   /* 48px */
    --head-h: 96px;       /* 2M */
    --section-gap: var(--s12);
  }
}