/* AZURE VOID tokens: the single source of truth. A re-skin starts and ends here.

   The palette is achromatic on purpose. There is no flat accent anywhere on this
   site. The only chromatic event in the system is an iridescent ramp, and it is
   spent exclusively on LIVE STATE: the patched signal path and a control that is
   currently doing something. Because the ramp never carries meaning on its own,
   every live state also changes shape or wording. The focus ring is chrome.

   Every ratio and distance in the comments was computed by tools/colour.mjs, not
   estimated. The numbers are printed on /styleguide.                              */

@font-face {
  font-family: "Syne";
  src: url("../fonts/syne-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- grounds: the void and the metalwork stacked on it ---- */
  --void: #08080a;
  --void-2: #101116;   /* raised bay */
  --void-3: #181a20;   /* module faceplate */
  --void-4: #22242c;   /* rail edge, pressed faceplate */

  /* ---- chrome: the text metal ----
     chrome    #D8DBE2 on void 14.44:1
     chrome-2  #B9BEC8 on void 10.73:1   the body ink
     chrome-3  #EEF0F4 on void 17.54:1   the focus ring and display type  */
  --chrome: #d8dbe2;
  --chrome-2: #b9bec8;
  --chrome-3: #eef0f4;

  /* ---- steel: structure, not sentences ----
     steel     #6E7480 on void 4.26:1  FAILS AA for text. Hairlines, inactive
                                       faceplates and disabled ink only, where the
                                       3:1 non-text threshold applies.
     steel-lit #8A909C on void 6.24:1  the muted TEXT ink
     steel-deep #4A4F59 on chrome 5.93:1  the muted ink on plate surfaces        */
  --steel: #6e7480;
  --steel-lit: #8a909c;
  --steel-deep: #4a4f59;

  /* ---- the iridescent ramp: LIVE STATE ONLY ----
     on the void ground
       ice    #7DF2FF 15.26:1   nearest ledger accent dE00 14.9
       arc    #B858FE  5.59:1   nearest ledger accent dE00 13.1
       orchid #EFA6FF 11.02:1   nearest ledger accent dE00 13.6
     deepened, for the chrome plate ground
       ice    #0C4356  7.76:1   dE00 12.3
       arc    #8708A8  5.76:1   dE00 12.5
       orchid #8E2A92  5.23:1   dE00 12.7                                        */
  --live-1: #7df2ff;
  --live-2: #b858fe;
  --live-3: #efa6ff;
  --live-1-deep: #0c4356;
  --live-2-deep: #8708a8;
  --live-3-deep: #8e2a92;

  /* ---- semantics: the void is the default ground ---- */
  --bg: var(--void);
  --bg-2: var(--void-2);
  --bg-3: var(--void-3);
  --bg-4: var(--void-4);
  --fg: var(--chrome);
  --fg-strong: var(--chrome-3);
  --body-ink: var(--chrome-2);
  --muted: var(--steel-lit);
  --hair: var(--steel);
  --line: rgba(216, 219, 226, 0.14);
  --line-strong: rgba(216, 219, 226, 0.34);
  --plate: linear-gradient(180deg, #1c1e26 0%, #14161c 100%);
  --focus: var(--chrome-3);
  --live: linear-gradient(96deg, var(--live-1) 0%, var(--live-2) 52%, var(--live-3) 100%);
  --live-soft: linear-gradient(96deg, rgba(125, 242, 255, 0.16) 0%, rgba(184, 88, 254, 0.16) 52%, rgba(239, 166, 255, 0.16) 100%);
  --live-edge: rgba(184, 88, 254, 0.55);

  /* ---- the plate theme: a chrome surface with void ink ---- */
  --shadow-plate: 0 1px 0 rgba(238, 240, 244, 0.06) inset, 0 18px 40px rgba(0, 0, 0, 0.55);

  /* ---- type ---- */
  --font-display: "Syne", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Urbanist", ui-sans-serif, system-ui, sans-serif;

  --t-mark: clamp(0.66rem, 0.6rem + 0.22vw, 0.76rem);   /* rack labels, engraved */
  --t-small: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem);
  --t-body: clamp(1rem, 0.96rem + 0.28vw, 1.12rem);
  --t-lead: clamp(1.1rem, 1rem + 0.62vw, 1.36rem);
  --t-h3: clamp(1.16rem, 1.04rem + 0.66vw, 1.5rem);
  --t-h2: clamp(1.7rem, 1.3rem + 2.1vw, 3.1rem);
  --t-h1: clamp(2.5rem, 1.5rem + 5.2vw, 5.6rem);
  --t-mono-num: clamp(0.82rem, 0.76rem + 0.26vw, 0.94rem);

  --lh-tight: 0.95;
  --lh-head: 1.06;
  --lh-body: 1.62;
  --track-mark: 0.2em;

  /* ---- 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: 4.5rem;
  --s-9: 7rem;
  --section-pad: clamp(3.5rem, 2rem + 7vw, 7.5rem);
  --chassis-w: 78rem;
  --measure: 62ch;

  /* ---- radius: rack gear is square. Only jacks are round. ---- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-round: 999px;

  /* ---- motion ---- */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 380ms;
  --dur-4: 620ms;
  --ease-out: cubic-bezier(0.22, 0.9, 0.28, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.28, 1);

  /* ---- z roles ---- */
  --z-cable: 2;
  --z-rail: 60;
  --z-bay: 70;
  --z-skip: 90;
}

/* The plate theme. Any wrapper carrying it flips the whole system to the chrome
   ground, including the ramp, which deepens so it stays AA on metal. */
[data-theme="plate"] {
  --bg: var(--chrome);
  --bg-2: #e6e8ed;
  --bg-3: #eef0f4;
  --bg-4: #dfe2e8;
  --fg: var(--void);
  --fg-strong: var(--void);
  --body-ink: #262931;
  --muted: var(--steel-deep);
  --hair: #9aa0ac;
  --line: rgba(8, 8, 10, 0.16);
  --line-strong: rgba(8, 8, 10, 0.42);
  --plate: linear-gradient(180deg, #eef0f4 0%, #e2e5eb 100%);
  --focus: var(--void);
  --live: linear-gradient(96deg, var(--live-1-deep) 0%, var(--live-2-deep) 52%, var(--live-3-deep) 100%);
  --live-soft: linear-gradient(96deg, rgba(12, 67, 86, 0.14) 0%, rgba(135, 8, 168, 0.14) 52%, rgba(142, 42, 146, 0.14) 100%);
  --live-edge: rgba(135, 8, 168, 0.5);
  --shadow-plate: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 14px 34px rgba(8, 8, 10, 0.18);
}