/* Cantina -- bar jukebox, warm and lit.
 *
 * The skin that proves the edge tokens work: every border colour here is the
 * same, and --edge-radius is 18px, so the identical .rk-panel markup that
 * extrudes under Llama becomes a soft card. Cover art gets a pill radius and a
 * spin, turning the same element into a 45. Source: Main.dc.html (direction A). */

[data-skin="cantina"] {
  /* page */
  --bg-page:            #180d09;
  --bg-page-texture:    radial-gradient(120% 60% at 50% 0%,
                          rgba(232, 163, 61, 0.04) 0%,
                          rgba(232, 163, 61, 0) 60%);
  --bg-page-lights:     radial-gradient(26% 22% at 30% 28%,
                          rgba(232, 163, 61, 0.09) 0%,
                          rgba(232, 163, 61, 0) 100%),
                        radial-gradient(24% 20% at 70% 62%,
                          rgba(217, 68, 54, 0.14) 0%,
                          rgba(217, 68, 54, 0) 100%);
  --surface-blur:       none;
  --surface-panel:      #24140d;
  --surface-raised:     #331d12;
  --surface-sunken:     #120806;
  --surface-row:        #2b1810;
  --surface-row-active: #452715;
  --ink-on-row:         #f6ead4;
  --ink-on-row-dim:     #a5865f;

  /* ink */
  --ink-primary:        #f6ead4;
  --ink-secondary:      #c4ac8b;
  --ink-muted:          #a5885f;
  --ink-on-accent:      #180d09;
  --ink-on-active-row:  #f6ead4;

  /* accent */
  --accent:             #e8a33d;
  --focus-shadow:       0 0 14px rgba(232, 163, 61, 0.55);
  --accent-secondary:   #d94436;
  --danger:             #d94436;
  --positive:           #8fbf5a;

  /* readout */
  --readout-bg:         #120806;
  --readout-ink:        #e8a33d;
  --readout-ink-dim:    #b98b3f;
  --readout-glow:       0 0 18px rgba(232, 163, 61, 0.35);
  --readout-texture:    none;

  /* chrome -- centred wordmark, no window buttons */
  --chrome-bg:          #3a1d10;
  --chrome-shadow:      none;
  --chrome-ink:         #e8a33d;
  --chrome-height:      44px;
  --chrome-font:        Bungee, sans-serif;
  --chrome-size:        14px;
  --chrome-tracking:    0.3em;
  --chrome-transform:   uppercase;
  --chrome-text-align:  center;
  --chrome-buttons:     none;
  --chrome-close-display: none;
  --chrome-button-size: 18px;
  --chrome-button-pad:  var(--space-3);
  --chrome-button-bg:   transparent;
  --chrome-rail:        none;
  --chrome-rail-display: none;
  --chrome-title-bg:    transparent;
  --chrome-title-border: 0 solid transparent;
  --chrome-title-padding: 0;
  --chrome-title-radius: 0;
  --chrome-button-border-width: 0px;
  --chrome-button-minimize-image: none;
  --chrome-button-maximize-image: none;
  --chrome-button-close-image: none;
  --chrome-button-ink: #e8a33d;
  --chrome-close-bg:    transparent;

  /* edge -- all four sides equal, so nothing bevels */
  --edge-width:         1px;
  --edge-radius:        18px;
  --edge-radius-sm:     14px;
  --edge-radius-pill:   999px;
  --edge-top:           #4a2d1c;
  --edge-left:          #4a2d1c;
  --edge-right:         #4a2d1c;
  --edge-bottom:        #4a2d1c;
  --edge-inset-top:     #452a1a;
  --edge-inset-left:    #452a1a;
  --edge-inset-right:   #452a1a;
  --edge-inset-bottom:  #452a1a;
  --edge-hairline:      #4a2d1c;
  --device-radius:      32px;
  --edge-shadow:        none;
  --edge-shadow-float:  0 30px 60px rgba(0, 0, 0, 0.45);

  /* control */
  --control-height:     52px;
  --control-radius:     14px;
  --control-face:       #2e1a10;
  --control-texture:    none;
  --control-frame-image: none;
  --control-frame-image-active: none;
  --control-frame-slice: 100%;
  --control-frame-width: 1;
  --control-frame-outset: 0;
  --control-face-active: #3d2519;
  --control-ghost-hover-face: rgba(232, 163, 61, 0.08);
  --control-border-width: var(--edge-width);
  --control-icon-border-width: var(--edge-width);
  --control-decrement-icon: url("/llama/icons/remove.svg");
  --control-increment-icon: url("/llama/icons/add.svg");
  --control-ink:        #f2e3c9;
  --control-font:       Archivo, system-ui, sans-serif;
  --control-size:       14px;
  --control-tracking:   0.02em;
  --control-transform:  none;
  --control-light:      #4a2d1c;
  --control-dark:       #4a2d1c;
  --control-shadow:     none;
  --control-shadow-hover: none;
  --control-shadow-active: none;
  --control-icon-shadow: none;
  --control-icon-shadow-active: none;
  --control-content-shadow: 0 0 0 transparent;
  --control-content-shadow-active: 0 0 0 transparent;
  --control-hover-filter: none;
  --control-pad:        var(--space-4);

  /* room actions -- the pause/skip row under the player, and the rule that
     closes it off from the search field below */
  --action-lift:        var(--space-2);
  --action-icon-display: block;
  --action-divider-width: var(--edge-width);
  --action-divider-gap: var(--space-4);

  /* meter */
  --meter-track:        #2e1a10;
  --meter-fill:         #e8a33d;
  --meter-height:       6px;
  --meter-radius:       999px;
  --meter-thumb:        #e8a33d;
  --meter-thumb-width:  16px;
  --meter-thumb-height: 16px;

  /* visualizer */
  --viz-gradient:       linear-gradient(#f0b95e, #e8a33d);
  --viz-gap:            3px;
  --viz-radius:         999px;
  --viz-floor:          0.3;

  /* art -- a spinning 45 */
  --art-radius:         999px;
  --art-bg:             #17100e;
  --art-ink:            #f6ead4;
  --art-texture:        repeating-radial-gradient(circle at 50% 50%,
                          rgba(255, 255, 255, 0.05) 0 2px,
                          rgba(0, 0, 0, 0.16) 2px 5px);
  --art-label:          #d94436;
  --art-spindle:        #e8a33d;
  --art-hole:           #180d09;
  --art-spin:           rk-spin 3.6s linear infinite;

  /* type */
  --font-display:       Bungee, sans-serif;
  --font-body:          Archivo, system-ui, sans-serif;
  --font-readout:       Archivo, system-ui, sans-serif;
  --font-label:         Archivo, system-ui, sans-serif;
  --label-size:         11px;
  --label-tracking:     0.16em;
  --label-transform:    uppercase;
  --label-weight:       600;
  --title-tracking:     0.01em;
  --title-transform:    none;
  --title-weight:       400;
  --body-line:          1.5;

  /* motion */
  --viz-period:         900ms;
  --marquee-duration:   22s;
  --bg-lights-drift:    rk-drift 32s var(--ease) infinite alternate;
  --ease:               ease-in-out;
}