/* ============================================================================
   CROWN CALIBER — css/tokens.css            owner: DESIGN LEAD

   The ONE source of colour, type, spacing, radius, elevation and motion.
   mint.css and workshop.css style their components with these variables only:
   no hex codes, no font names, no pixel sizes that a token already covers.
   The art style (pixel A vs rendered B) is not picked yet — a reskin is meant
   to be an edit of THIS file, nothing else.

   HOW TO USE (for the mint and workshop builders)
   · Your component sits on a raised panel:   background var(--panel-bg);
     border 1px solid var(--panel-line); border-radius var(--panel-radius);
     box-shadow var(--panel-shadow); padding var(--panel-pad).
   · Labels (MINT, THE WORKSHOP, kickers): font var(--w-semi) var(--fs-label)
     var(--font-ui); letter-spacing var(--track-label); uppercase; color var(--ink-3).
   · Body copy: var(--font-ui) at var(--fs-md), color var(--ink-2).
     Bold phrases inside a sentence: color var(--ink), weight var(--w-med).
   · Numbers: font-family var(--font-num); font-variant-numeric var(--num).
     The big live count may use var(--font-display) at var(--fs-count).
   · Buttons, height var(--control-h), radius var(--r-1), label var(--fs-btn)
     var(--w-semi) uppercase tracked var(--track-btn):
       primary   --act / --act-ink / --act-line, hover --act-hover
       secondary --act-2 / --act-2-ink / --act-2-line, hover --act-2-hover
       waiting   --wait-soft fill, --wait-line border, --wait text
       disabled  --act-dead / --act-dead-ink / --act-dead-line
   · Status tones — a small dot plus a tinted 1px border on the whole line,
     NEVER a coloured left rail:  --ok, --warn, --bad, --wait, each with a
     -soft (fill) and -line (border) variant.
   · Art: any <img> of a token gets image-rendering: var(--art-rendering) and
     sits on var(--plate) while it loads.
   · Focus: box-shadow var(--focus) (or outline 2px solid var(--brass)).
   · Motion: transitions use var(--dur-1|2|3) and var(--ease). Reduced motion
     already shrinks every duration below, so honour the variables and it is
     handled.
   · CSP is strict (style-src 'self'): no style="" attributes and no
     setAttribute('style'). Setting el.style.width from JS is fine.
   ========================================================================= */

@font-face {
  font-family: "Cormorant";
  src: url("../fonts/cormorant-var.woff2") format("woff2-variations"),
       url("../fonts/cormorant-var.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant";
  src: url("../fonts/cormorant-var-italic.woff2") format("woff2-variations"),
       url("../fonts/cormorant-var-italic.woff2") format("woff2");
  font-weight: 300 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-var.woff2") format("woff2-variations"),
       url("../fonts/jost-var.woff2") format("woff2");
  font-weight: 300 600; font-style: normal; font-display: swap;
}

:root {
  /* ---------------------------------------------------------- surfaces --
     A light atelier: warm ivory paper, cream bands, hairline brass. The art
     brings its own dark velvet, so the page does not need to be black. */
  --paper:   #f4f0e7;   /* the page */
  --paper-2: #ece6d9;   /* alternate band, sunken strips */
  --paper-3: #e1d9c8;   /* trays, stepper wells, empty art slots */
  --card:    #fbf9f4;   /* raised panels: the mint box, workshop panels */
  --card-2:  #f5f1e8;   /* insets inside a panel: status line, list rows */

  --line:   #ddd4c3;    /* hairlines */
  --line-2: #c8bda8;    /* control borders, stronger rules */
  --line-3: #a89c84;    /* active / selected borders */

  /* --------------------------------------------------------------- ink -- */
  --ink:   #1c1915;     /* headings, numbers, strong text */
  --ink-2: #463f36;     /* body */
  --ink-3: #736859;     /* muted, labels, captions */
  --ink-4: #9e9383;     /* faint, disabled text, empty fields */
  --ink-inverse: #f7f3ea; /* text on --act and on the dark bench */

  /* ----------------------------------------------------- the one accent --
     Brass. Decorative use (rules, bars, the count, icons) takes --brass;
     brass TEXT on a light surface takes --brass-ink (5.5 : 1). */
  --brass:      #a8843f;
  --brass-hi:   #c9a55e;
  --brass-ink:  #7a5a1f;
  --brass-soft: rgba(168, 132, 63, .13);
  --brass-line: rgba(168, 132, 63, .45);

  /* ------------------------------------------------------------ actions -- */
  --act:        #1c1915;   /* primary button fill: espresso */
  --act-ink:    #f7f3ea;
  --act-line:   #1c1915;
  --act-hover:  #3a3129;

  --act-2:       transparent; /* secondary button */
  --act-2-ink:   #1c1915;
  --act-2-line:  #1c1915;
  --act-2-hover: rgba(28, 25, 21, .06);

  --act-dead:      #e7e0d2;   /* disabled */
  --act-dead-ink:  #9e9383;
  --act-dead-line: #d7cdba;

  /* ------------------------------------------------------- status tones --
     Dial green, amber, oxblood, and a blued-screw blue for "waiting". */
  --ok:        #2e6a46;
  --ok-soft:   rgba(46, 106, 70, .09);
  --ok-line:   rgba(46, 106, 70, .36);

  --warn:      #946118;
  --warn-soft: rgba(148, 97, 24, .09);
  --warn-line: rgba(148, 97, 24, .38);

  --bad:       #983428;
  --bad-soft:  rgba(152, 52, 40, .08);
  --bad-line:  rgba(152, 52, 40, .36);

  --wait:      #2f4f86;
  --wait-soft: rgba(47, 79, 134, .08);
  --wait-line: rgba(47, 79, 134, .36);

  /* ------------------------------------------------- the dark bench band --
     Used by site.css for one art band. A component placed on it inherits
     these through the variables above being re-pointed inside .band-bench. */
  --bench:      #1b1713;
  --bench-2:    #26201a;
  --bench-line: #3b3229;
  --bench-ink:  #efe8da;
  --bench-ink-2:#b8ac97;

  /* ------------------------------------------------------------- the art --
     STYLE A (pixel): pixelated.  STYLE B (rendered): switch to auto.
     --plate sits behind every token image while it loads. */
  --art-rendering: pixelated;
  --plate:      #16130f;
  --plate-line: #2e271f;

  /* --------------------------------------------------------------- type -- */
  --font-display: "Cormorant", "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --font-ui:      "Jost", "Futura", "Century Gothic", "Segoe UI", system-ui, sans-serif;
  --font-num:     "Jost", "Futura", "Segoe UI", system-ui, sans-serif;
  --num: tabular-nums lining-nums;   /* font-variant-numeric for every number */

  --w-light: 300;
  --w-reg:   400;
  --w-med:   500;
  --w-semi:  600;

  --fs-label: 11px;     /* uppercase kickers and labels */
  --track-label: .18em;
  --fs-btn:   12.5px;   /* button labels, uppercase */
  --track-btn: .14em;
  --fs-xs:  12px;
  --fs-sm:  13.5px;
  --fs-md:  15px;
  --fs-lg:  17px;
  --fs-xl:  20px;
  --fs-h3:  26px;
  --fs-count: 34px;     /* the live minted count in the mint box */
  --fs-h2:  clamp(34px, 4.4vw, 58px);
  --fs-h1:  clamp(50px, 7.2vw, 112px);

  --lh-tight: 1.02;
  --lh-snug:  1.25;
  --lh:       1.6;

  /* -------------------------------------------------------------- space --
     4-point scale. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;
  --s-9: 64px;
  --s-10: 96px;

  /* ------------------------------------------------------------- radius --
     Watchmaking is machined, not bubbly: corners are nearly square. */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* ---------------------------------------------------------- elevation -- */
  --shadow-1: 0 1px 2px rgba(28, 25, 21, .06);
  --shadow-2: 0 14px 34px -18px rgba(28, 25, 21, .30);
  --shadow-panel: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 28px 60px -30px rgba(28, 25, 21, .38);
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--brass);

  /* ------------------------------------------------------------- motion -- */
  --ease:   cubic-bezier(.2, .7, .1, 1);
  --dur-1:  .15s;
  --dur-2:  .35s;
  --dur-3:  .8s;

  /* ------------------------------------------------------------- layout -- */
  --wrap:     1240px;
  --gutter:   32px;
  --header-h: 64px;
  --control-h: 48px;

  /* --------------------------------------------- the component contract --
     What the mint box and the workshop panels are made of. */
  --panel-bg:     var(--card);
  --panel-line:   var(--line);
  --panel-radius: var(--r-1);
  --panel-shadow: var(--shadow-panel);
  --panel-pad:    var(--s-6);
  --inset-bg:     var(--card-2);
  --inset-line:   var(--line);
}

@media (max-width: 700px) {
  :root {
    --gutter: 16px;
    --header-h: 56px;
    --panel-pad: var(--s-5);
    --fs-count: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: .01ms; --dur-2: .01ms; --dur-3: .01ms; }
}

/* STYLE B (rendered art) switch, for after the style pick. Flip the
   attribute on <html> and the art stops being pixel-scaled; everything else
   stays. Palette changes for B, if any, go here too. */
:root[data-skin="render"] {
  --art-rendering: auto;
}