/* The Studio — house style guide overrides.
 *
 * The Wm Hemphill pack is treated as a VENDORED dependency: nothing in
 * theme/ is edited, so the next revision of the pack drops straight in.
 * Everything we disagree with lives here instead.
 *
 * Why this file always wins: the pack wraps its rules in
 * `@layer pw-theme.tokens` / `.fonts` / `.components` / `.skin`, and an
 * UNLAYERED rule beats any layered one regardless of specificity. So these
 * plain declarations override the pack without a single !important and
 * without out-specifying anything.
 *
 * Load order in index.html: tokens -> fonts -> components -> skin -> page
 * -> THIS FILE.
 */

/* ------------------------------------------------------------- palette
 * The ten materials named in the approved style guide. Where the pack and
 * the guide disagreed, the guide won (D, 2026-08-15). The pack's own wood
 * ramps are left alone -- the guide names one walnut, the pack carries a
 * mesquite/acacia/walnut set the console switches between.
 */
[data-pw-theme="studio-chicago-console"] {
  --studio-black-wrinkle:      #1b1c1e;   /* black wrinkle steel  */
  --studio-steel-dark:         #2f3236;   /* chassis mid          */
  --studio-brushed-aluminum:   #6b6f73;   /* brushed aluminum     */
  --studio-aluminum-light:     #b7b5a6;   /* aluminum highlight   */
  --studio-nicotine-ivory:     #e6dec1;   /* nicotine ivory       */
  --studio-walnut:             #7a5a3a;   /* walnut wood          */
  --studio-faded-olive:        #4d5d3a;   /* faded olive          */
  --studio-burgundy-record:    #8b1e1e;   /* record red           */
  --studio-amber-vu:           #e0aa3a;   /* meter amber          */
  --studio-cobalt-indicator:   #2a4d8f;   /* cobalt indicator     */

  /* Derived, so the guide's ten stay the only numbers anyone edits. */
  --studio-oxidized-charcoal:  var(--studio-black-wrinkle);
  --studio-canvas:             var(--studio-aluminum-light);
  --studio-red-light:          #d8332c;
  --studio-green-light:        #7d9a46;

  /* The pack's generic primitives, re-pointed at the guide. */
  --pw-color-bg:               #101113;
  --pw-color-surface:          var(--studio-steel-dark);
  --pw-color-surface-raised:   #3a3d41;
  --pw-color-text:             var(--studio-nicotine-ivory);
  --pw-color-text-muted:       #9a9686;
  --pw-color-border:           var(--studio-brushed-aluminum);
  --pw-color-primary:          var(--studio-amber-vu);
  --pw-color-secondary:        var(--studio-faded-olive);
  --pw-color-danger:           var(--studio-burgundy-record);
  --pw-color-focus:            #f0bd5c;
}

/* -------------------------------------------------------------- type
 * The guide asks for DIN Condensed + IBM Plex Mono. DIN Condensed is a
 * commercial face and cannot be redistributed, so the display face is
 * Oswald -- the standard open DIN-alike -- until a licensed DIN is
 * supplied. IBM Plex Mono is the guide's own secondary and ships under the
 * SIL OFL, so that one is exact.
 *
 * Both are served from this folder. The pack declares
 * `integrity.external_runtime_assets: false`, so a CDN link would violate
 * its own contract as well as failing offline.
 */
[data-pw-theme="studio-chicago-console"] {
  --pw-font-display: "Oswald", "DIN Condensed", "Arial Narrow", Impact, sans-serif;
  --pw-font-label:   "Oswald", "DIN Condensed", "Arial Narrow", sans-serif;
  --pw-font-body:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pw-font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ------------------------------------------------------- font files
 * Latin subset only, woff2, served from this repo. Oswald and IBM Plex
 * Mono are both SIL Open Font License 1.1 -- redistribution is permitted,
 * which is exactly why DIN Condensed is not here.
 */
/* Oswald ships as a VARIABLE font -- Google served the identical file for
   both weights we asked for. Declared as a range so the whole axis works off
   one request; pinning it twice would download the same bytes again AND can
   render 600 at 400 because each face claims a single weight. */
@font-face{
  font-family:"Oswald"; font-style:normal; font-weight:200 700; font-display:swap;
  src:url("theme/assets/fonts/oswald-400.woff2") format("woff2-variations"),
      url("theme/assets/fonts/oswald-400.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("theme/assets/fonts/plexmono-400.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap;
  src:url("theme/assets/fonts/plexmono-600.woff2") format("woff2");
}

/* ==================================================================
 * ART SLOTS — photoreal parts overlaid on the CSS console.
 *
 * The pack draws every control with gradients and references no images
 * at all, so there is nowhere to "put" artwork. These rules add that
 * layer WITHOUT editing the vendored pack.
 *
 * The pattern is deliberate: each part gets an ::after overlay carrying
 * the image. If the file is absent the overlay simply paints nothing and
 * the CSS-drawn control shows through unchanged -- so this whole block is
 * inert until art lands in art/, and a missing or misnamed file degrades
 * to today's console instead of a hole.
 *
 * Export spec, including sizes: static/studio/ART-SPEC.md
 * ================================================================== */

[data-pw-theme="studio-chicago-console"] .studio-reel,
[data-pw-theme="studio-chicago-console"] .studio-vu,
[data-pw-theme="studio-chicago-console"] .studio-mini-vu,
[data-pw-theme="studio-chicago-console"] .studio-counter,
[data-pw-theme="studio-chicago-console"] .studio-channel-knob,
[data-pw-theme="studio-chicago-console"] .studio-fader,
[data-pw-theme="studio-chicago-console"] .studio-patch-jack{
  position:relative;
}

[data-pw-theme="studio-chicago-console"] .studio-reel::after,
[data-pw-theme="studio-chicago-console"] .studio-vu--master::after,
[data-pw-theme="studio-chicago-console"] .studio-mini-vu::after,
[data-pw-theme="studio-chicago-console"] .studio-channel-knob::after,
[data-pw-theme="studio-chicago-console"] .studio-patch-jack::after{
  content:"";
  position:absolute; inset:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  pointer-events:none;
}

/* The reel keeps spinning: the overlay is inside the rotating element. */
[data-pw-theme="studio-chicago-console"] .studio-reel::after{
  background-image:url("art/reel.png");
  border-radius:50%;
}
[data-pw-theme="studio-chicago-console"] .studio-vu--master::after{
  background-image:url("art/vu-face.png");
}
[data-pw-theme="studio-chicago-console"] .studio-mini-vu::after{
  background-image:url("art/vu-channel.png");
}
[data-pw-theme="studio-chicago-console"] .studio-channel-knob::after{
  background-image:url("art/knob.png");
}
[data-pw-theme="studio-chicago-console"] .studio-patch-jack::after{
  background-image:url("art/patch-jack.png");
}

/* Surfaces tile rather than stretch, so grain stays the right scale. */
[data-pw-theme="studio-chicago-console"] .studio-side-wood{
  background-image:url("art/walnut.jpg");
  background-size:cover;
}
[data-pw-theme="studio-chicago-console"] .studio-machine,
[data-pw-theme="studio-chicago-console"] .studio-mixer{
  background-image:url("art/wrinkle-steel.jpg");
  background-size:340px;
  background-blend-mode:multiply;
}