/* ===========================================================================
   MAINSTAY TOKENS: the whole re-skin surface.

   To fit a client you change three things in this file and nothing else:
     1. --accent-deep and --accent-bright (or paste one of the four vetted
        alternates listed at the bottom, contrast already measured).
     2. --paper / --ink temperature, only if their brand demands it.
     3. The wordmark font, if they have one they like better.

   Every contrast figure written in a comment here was computed with the WCAG
   relative-luminance formula, not eyeballed. If you change a value, re-measure.
   The measuring procedure is written on /styleguide.
   ======================================================================== */

@font-face {
  font-family: "Faustina";
  src: url("../fonts/faustina.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Faustina";
  src: url("../fonts/faustina-italic.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jakarta";
  src: url("../fonts/jakarta.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jakarta";
  src: url("../fonts/jakarta-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- grounds ------------------------------------------------------- */
  --paper: #f7f4ef;      /* the light ground */
  --paper-2: #efeae1;    /* raised plates on paper */
  --paper-3: #e4ddd0;    /* pressed / chips on paper */
  --ink: #161a1d;        /* the dark ground */
  --ink-2: #21262a;      /* raised plates on ink */
  --ink-3: #2c3237;      /* hairline fills on ink */

  /* ---- accent: BRASS is the default -----------------------------------
     deep   #7a5a10 on paper  5.80:1   on paper-2  5.32:1
     bright #e8b44c on ink    9.22:1   on ink-2    8.04:1
     ink text on bright fill  9.22:1
     bright over the hero scrim worst case  3.81:1 (large text only)     */
  --accent-deep: #7a5a10;
  --accent-bright: #e8b44c;

  /* ---- text ---------------------------------------------------------- */
  --ink-muted: #5c6166;    /* on paper 5.70:1, on paper-2 5.22:1, on paper-3 4.63:1 */
  --paper-muted: #a3aab1;  /* on ink 7.45:1, on ink-2 6.50:1 */

  /* ---- semantics: the paper theme is the default ---------------------- */
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --bg-3: var(--paper-3);
  --fg: var(--ink);            /* 15.96:1 on paper */
  --muted: var(--ink-muted);
  --accent: var(--accent-deep);
  --accent-fill: var(--accent-deep);
  --accent-fill-fg: var(--paper);   /* 5.80:1 on accent-deep */
  --line: rgba(22, 26, 29, 0.16);      /* decorative hairline, no contrast floor applies */
  --line-strong: rgba(22, 26, 29, 0.5); /* the load-bearing control boundary: composited over
                                           paper 3.28:1, over paper-2 3.21:1, over paper-3 3.11:1.
                                           It is the only thing identifying the form fields and
                                           every ghost button, so it must clear 3:1 (SC 1.4.11). */
  --focus: #1a56c4;            /* 6.03:1 on paper, 5.53:1 on paper-2 */

  /* ---- the hero scrim -------------------------------------------------
     Two stacked black layers compose as a_eff = 1 - (1 - base)(1 - grad).
     base .34 plus the gradient below holds a_eff >= 0.660 across 8%-92% of
     the marquee height, and 0.660 is exactly the weakest point in that band.
     The copy block is measured to sit inside 8%-92% at every breakpoint.
     At a_eff .660 a pure white source pixel composites to #575757, and
       paper  #f7f4ef  reads 6.59:1  (needs 4.5:1)
       bright #e8b44c  reads 3.81:1  (needs 3:1, large text only)
     so the guarantee holds even if a client drops in a blown-out sky.    */
  --scrim-base: 0.34;

  /* ---- type ---------------------------------------------------------- */
  --font-display: "Faustina", "Iowan Old Style", Georgia, serif;
  --font-body: "Jakarta", "Segoe UI", system-ui, sans-serif;
  --t-display: clamp(2rem, 8.2vw, 3.6rem);
  --t-h2: clamp(1.7rem, 4.2vw, 2.6rem);
  --t-h3: clamp(1.15rem, 2.1vw, 1.4rem);
  --t-lead: clamp(1.03rem, 1.6vw, 1.2rem);
  --t-body: 1.0625rem;
  --t-small: 0.9rem;
  --t-micro: 0.8125rem;
  --t-kicker: 0.75rem;
  --lh-display: 1.05;
  --lh-heading: 1.12;
  --lh-body: 1.6;
  --track-kicker: 0.18em;
  --track-display: -0.022em;

  /* ---- space --------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --section-pad: clamp(3.5rem, 9vh, 6rem);
  --edge: clamp(1.15rem, 4.4vw, 3rem);
  --measure: 38rem;
  --lane-max: 71rem;

  /* ---- shape --------------------------------------------------------- */
  --r-1: 6px;
  --r-2: 10px;      /* the house radius */
  --r-3: 18px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(22, 26, 29, 0.05), 0 12px 30px rgba(22, 26, 29, 0.08);
  --shadow-2: 0 2px 6px rgba(22, 26, 29, 0.08), 0 24px 60px rgba(22, 26, 29, 0.14);

  /* ---- motion -------------------------------------------------------- */
  --dur-1: 140ms;
  --dur-2: 320ms;
  --dur-3: 620ms;
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-inout: cubic-bezier(0.83, 0, 0.17, 1);

  /* ---- layers -------------------------------------------------------- */
  --z-bar: 30;
  --z-shopfront: 40;
  --z-demo: 50;
  --z-skip: 70;
}

/* The ink theme. Any wrapper carrying data-theme="ink" flips the whole
   semantic set; components never touch a primitive, so nothing else changes. */
[data-theme="ink"] {
  --bg: var(--ink);
  --bg-2: var(--ink-2);
  --bg-3: var(--ink-3);
  --fg: var(--paper);          /* 15.96:1 on ink */
  --muted: var(--paper-muted);
  --accent: var(--accent-bright);
  --accent-fill: var(--accent-bright);
  --accent-fill-fg: var(--ink);
  --line: rgba(247, 244, 239, 0.18);
  --line-strong: rgba(247, 244, 239, 0.5);
  --focus: #a7c4ff;            /* 9.99:1 on ink */
}

/* ===========================================================================
   THE FOUR VETTED ACCENT ALTERNATES

   Each pair was measured, not picked by eye. Paste one pair over
   --accent-deep / --accent-bright in :root above and the whole site follows.
   Columns: deep on paper | deep on paper-2 | bright on ink | bright on ink-2 |
   bright over the hero scrim worst case (must clear 3:1 for the display word).

     EMBER   deep #9a3412  6.66  6.10   bright #f2af7e  9.34  8.15   3.86
     PINE    deep #14514a  8.30  7.60   bright #5fc8a2  8.56  7.47   3.53
     HARBOR  deep #1e4fa3  7.08  6.49   bright #8ab6f2  8.38  7.31   3.46
     PLUM    deep #7a2a63  8.18  7.49   bright #eda9d9  9.40  8.20   3.88

   The presets in assets/js/main.js carry these as accent overrides so the
   demo can show a prospect their trade in its own colour. In production you
   keep one pair, paste it here, and delete the switcher.
   ======================================================================== */