/* ============================================================================
   REQUIZA COOPERATIVE UNION — design tokens
   ----------------------------------------------------------------------------
   Direction: "The Saturday Line".
   A cooperative is a promise kept on a schedule. Every rule in this union is
   measured in Saturdays: you save on Saturday, you may borrow after 13 of them,
   and after 52 you are paid your interest and your dividend. So the whole site
   is built on a line of Saturdays, and on the ledger grammar that records them
   — particulars on the left, amount on the right, a rule under every total.

   Ground rules this file encodes:
   - Every hairline is a real hairline: 0.5px on retina, 1px on everything else.
   - Every surface pair here clears WCAG AA for its intended text size.
   - Nothing is drawn with a raster image, so nothing goes soft on a 3x screen.
   ========================================================================= */

:root {
  /* -- Colour -------------------------------------------------------------
     Ledger paper is tinted green because accounting paper is: it is easier on
     the eye than white, and on a cheap Android LCD it stops the page glaring. */
  --paper:        #E4EAE1;  /* page ground */
  --sheet:        #F5F7F2;  /* the sheet laid on the book: cards, tables, fields */
  --sheet-alt:    #EDF1EA;  /* alternating ledger row */
  --ink:          #131E18;  /* body text — 14.0:1 on paper */
  --ink-soft:     #3E4C43;  /* secondary text — 7.4:1 on paper */

  --charter:      #0B4F32;  /* charter green — full-bleed bands, header, primary */
  --charter-deep: #06331F;  /* the darkest band: footer, seal field */
  --charter-mid:  #116B45;  /* hover state on light grounds */
  --chalk:        #EAF2EC;  /* text on charter — 8.5:1 */

  --brass:        #7F5B12;  /* shares, dividends, the seal, on light grounds — 5.0:1 on paper */
  --brass-light:  #EABF66;  /* the same idea on charter — 5.6:1, and 4.8:1 on a lifted panel */
  --leaf:         #186B44;  /* complete · entered · credit */
  --leaf-light:   #5FCF98;  /* the same on charter — 5.0:1 */
  --kola:         #A3242E;  /* not yet · overdue · debit · the money-column fence */
  --kola-light:   #E8848B;  /* the same on charter, large text and marks only */

  --rule:         #B9C6BC;  /* decorative hairline on light grounds */
  --rule-dark:    #8FB3A0;  /* decorative hairline on charter — 4.2:1 */
  --rule-strong:  #6E8177;  /* interactive borders on light — 3.4:1 */
  --border-ink:   #4E6157;  /* form control borders — 5.4:1 */

  --focus:        #0B4F32;
  --focus-dark:   #EABF66;

  /* Semantic aliases. Components reference these, never the raw names above,
     so a surface can be restyled in one place. */
  --bg:           var(--paper);
  --fg:           var(--ink);
  --fg-muted:     var(--ink-soft);
  --surface:      var(--sheet);
  --hairline:     var(--rule);
  --accent:       var(--charter);
  --accent-fg:    var(--chalk);

  /* -- Hairlines ----------------------------------------------------------
     A 1px border on a 2x screen is two device pixels — visibly heavier than
     the ruled line it stands for. On retina we draw the real thing. */
  --hair: 1px;

  /* -- Type ---------------------------------------------------------------
     Two variable families, both latin-subset, ~90KB together.

     Archivo carries the institution's voice at two widths, and the width axis
     does structural work rather than decoration: expanded is the stamped form
     header, narrowed is the ledger column. Same hand, different pen, one file
     — which matters when a member is loading this on mobile data.

     Faustina carries the human voice. It is a warm, low-contrast, slightly
     narrow serif built for screens: it fits more words per line at 360px than
     a magazine serif and does not shred on a cheap panel. Roman only — the
     italic file is 45KB that a member would pay for and never notice, so
     emphasis is weight plus a brass underline instead. */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Faustina", Georgia, "Times New Roman", serif;
  --font-figure:  "Archivo", "Roboto Condensed", "Arial Narrow", Arial, sans-serif;

  --wdth-wide:   118;  /* h1, the masthead wordmark */
  --wdth-broad:  112;  /* h2 */
  --wdth-open:   105;  /* h3 */
  --wdth-plain:  100;  /* eyebrows, buttons, navigation */
  --wdth-narrow:  82;  /* figures, column heads, codes, dates */

  /* The ledger line. Every ruled region is leaded to it and every vertical
     gap is a multiple of it, so the rules never drift out of register. */
  --line: 1.75rem;      /* 28px */

  --t-micro: 0.6875rem; /* folio numbers, stamp text */
  --t-label: 0.8125rem; /* column heads, captions, footnotes */
  --t-small: 0.9375rem;
  --t-body:  1.0625rem;
  --t-lead:  1.1875rem;
  --t-h4:    1.1875rem;
  --t-h3:    clamp(1.3125rem, 1.05rem + 1.1vw, 1.625rem);
  --t-h2:    clamp(1.75rem,  1.35rem + 1.9vw, 2.625rem);
  --t-h1:    clamp(2.25rem,  1.5rem  + 3.1vw, 3.75rem);
  --t-hero:  clamp(2.5rem,   1.5rem  + 4.2vw, 4.5rem);

  /* -- Space --------------------------------------------------------------
     Multiples of the ledger line, so the page breathes in whole rules. */
  --s-1:  0.4375rem;  /* line / 4 */
  --s-2:  0.875rem;   /* line / 2 */
  --s-3:  1.3125rem;
  --s-4:  1.75rem;    /* one line */
  --s-5:  2.625rem;
  --s-6:  3.5rem;     /* two lines */
  --s-7:  5.25rem;    /* three lines */
  --s-8:  7rem;       /* four lines */
  --s-9:  8.75rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* -- Measure ------------------------------------------------------------- */
  --wrap:      76rem;
  --wrap-tight:64rem;
  --wrap-text: 38rem;
  --gutter:    clamp(1.25rem, 0.6rem + 2.6vw, 2.75rem);
  --rail:      4.5rem;   /* the ledger margin that carries section folios */

  /* -- Form --------------------------------------------------------------- */
  --radius:    3px;      /* a trimmed page corner, not a pill */
  --radius-lg: 5px;

  /* -- Motion -------------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --fast:      140ms;
  --mid:       260ms;
  --slow:      520ms;

  --shadow-sheet: 0 1px 0 rgba(19, 30, 24, 0.06);
  --shadow-lift:  0 2px 0 rgba(19, 30, 24, 0.08), 0 12px 28px -18px rgba(19, 30, 24, 0.5);

  --z-header: 100;
  --z-nav:    110;
}

@media (min-resolution: 2dppx) {
  :root { --hair: 0.5px; }
}

@media (min-resolution: 3dppx) {
  :root { --hair: 0.34px; }
}

/* Charter ground: components inside a dark band opt in by setting this class,
   and every semantic alias flips. No component needs a dark-specific rule. */
.on-charter {
  --bg:        var(--charter);
  --fg:        var(--chalk);
  --fg-muted:  #B4CDBF;
  --surface:   rgba(255, 255, 255, 0.055);
  --hairline:  var(--rule-dark);
  --accent:    var(--brass-light);
  --accent-fg: var(--charter-deep);
  --focus:     var(--focus-dark);
  --leaf:      var(--leaf-light);
  --kola:      var(--kola-light);
  --brass:     var(--brass-light);
  --rule-strong: var(--rule-dark);
  --border-ink:  var(--rule-dark);
  color: var(--fg);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.on-charter-deep {
  --bg: var(--charter-deep);
  background-color: var(--bg);
}