/* ============================================================
   AEQUITAS WINE HOLDINGS, INC. - DESIGN SYSTEM TOKENS
   Tradition: the engraved share certificate / legal instrument.
   Cameron's direction, 2026-07-31.

   Aequitas issues instruments. It does not market itself. The surface
   is security-paper stock, engine-turned borders, oxblood engraving,
   an embossed seal, and clauses set as FIRST / SECOND / THIRD. Dense
   and ornamental, which is the opposite of the airy, tasteful default
   this system replaced.

   DISTINCTNESS CONTRACT (Automations/design-system-distinct.py):
   no hex, typeface, easing curve or duration here may appear in
   Viridian's or Cobalt's tokens. Radius 0 is exempt and shared, see
   the geometry note below.
   ============================================================ */

@import url("./fonts.css");

:root {
  /* --- Security paper: cool, grey-green, faintly institutional.
         Deliberately cool so it cannot be confused with Viridian's
         warm map buff. --------------------------------------- */
  --aeq-stock:      #E4E8E5;  /* certificate stock, page ground    */
  --aeq-stock-2:    #D2D8D3;  /* recessed panel, clause ground     */
  --aeq-guilloche:  #A9B4AC;  /* engine-turned line work           */
  --aeq-rule:       #8C9A91;  /* border rules                      */

  /* --- Engraved ink ----------------------------------------- */
  --aeq-ink:        #1C211E;  /* body, deep with a green cast      */
  --aeq-ink-2:      #4A544D;  /* secondary, counter-signature       */
  --aeq-void:       #0E1A12;  /* the endorsement plate on the back */

  /* --- Oxblood: the colour a certificate is actually engraved in */
  --aeq-oxblood:    #6B1F2A;  /* primary engraving                 */
  --aeq-oxblood-lt: #93394A;  /* hover, secondary engraving        */

  /* --- The seal --------------------------------------------- */
  --aeq-seal:       #A8873E;  /* embossed gold seal                */

  /* --- Typography. Zodiak is a high-contrast display serif with
         genuinely odd forms; Gambetta is a Garalde with character
         rather than a neutral book face. Courier Prime carries the
         register: certificate number, date, transfer entries.
         None of the three appears in another house. ---------- */
  --aeq-display:  "Zodiak", "Times New Roman", serif;
  --aeq-sans:     "Gambetta", Georgia, serif;   /* the "text" role is a serif here, on purpose */
  --aeq-mono:     "Courier Prime", ui-monospace, monospace;

  --aeq-display-weight: 700;
  --aeq-tracking-display: 0.005em;
  --aeq-tracking-legend: 0.34em;  /* THIS CERTIFIES THAT ...      */
  --aeq-measure: 58ch;            /* narrow, justified columns    */
  --aeq-leading-display: 1.06;
  --aeq-leading-body: 1.52;

  /* --- Geometry. Radius 0, and NOT as a differentiator: an
         engraved instrument and a Zurich poster are both hard
         edged, and forcing one of them to round its corners to
         satisfy a lint rule would be the tool damaging the work.
         0 is therefore exempt in the checker, exactly as 0ms
         already is for reduced motion. Aequitas's real geometric
         signature is the double rule and the guilloche band. -- */
  --aeq-radius: 0px;
  --aeq-border-outer: 3px double var(--aeq-oxblood);
  --aeq-border-inner: 1px solid var(--aeq-rule);
  --aeq-guilloche-band: 22px;

  /* --- Spacing: tight and typographic, not an 8pt web scale --- */
  --aeq-s1: 3px;
  --aeq-s2: 7px;
  --aeq-s3: 14px;
  --aeq-s4: 22px;
  --aeq-s5: 38px;
  --aeq-s6: 58px;
  --aeq-gutter: clamp(18px, 3.5vw, 54px);

  /* --- Motion: an instrument does not animate. These exist only
         so interactive states are not instantaneous. ---------- */
  --aeq-ease: cubic-bezier(0.33, 0, 0.15, 1);
  --aeq-dur-fast: 70ms;
  --aeq-dur: 110ms;
  --aeq-dur-slow: 190ms;
}

/* The engine-turned band. Real guilloche is a spirograph of
   interfering curves; this layers three offset radial ring sets
   against a fine diagonal hatch, which reads correctly at the size
   a border is actually seen. */
.aeq-guilloche {
  background-color: var(--aeq-stock);
  background-image:
    repeating-radial-gradient(circle at 0% 50%,
      transparent 0 3px, var(--aeq-guilloche) 3px 3.6px, transparent 3.6px 7px),
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0 4px, var(--aeq-guilloche) 4px 4.6px, transparent 4.6px 9px),
    repeating-radial-gradient(circle at 100% 50%,
      transparent 0 3px, var(--aeq-guilloche) 3px 3.6px, transparent 3.6px 7px),
    repeating-linear-gradient(66deg,
      transparent 0 2px, var(--aeq-guilloche) 2px 2.4px, transparent 2.4px 5px);
  background-size: 44px 100%, 62px 100%, 44px 100%, auto;
  opacity: .85;
}

@media (prefers-reduced-motion: reduce) {
  :root { --aeq-dur-fast: 0ms; --aeq-dur: 0ms; --aeq-dur-slow: 0ms; }
}