/* ================================
   SKIN: STONE
   ================================ */

#arc-lens-dial-root.arc-lens-skin[data-skin="stone"] {
  --arc-skin-bg-opacity: 1;

  /* warm stone -> pale etched tone */
  --arc-dial-stroke: rgba(245, 236, 210, 0.58);
  --arc-dial-stroke-active: rgba(255, 248, 230, 0.85);
  --arc-dial-stroke-disabled: rgba(245, 236, 210, 0.48);

  --arc-dial-stroke-width: 3;
  --arc-dial-stroke-width-hover: 4;
  --arc-dial-stroke-width-active: 4.5;

  --arc-dial-label: rgba(255, 248, 230, 0.78);
  --arc-dial-label-disabled: rgba(255, 248, 230, 0.62);
  --arc-dial-coming: rgba(255, 248, 230, 0.45);

  --arc-dial-fill-hover: rgba(0, 0, 0, 0.05);
  --arc-dial-fill-active: rgba(0, 0, 0, 0.15); /* your chosen value */
  --arc-dial-fill-focus: rgba(0, 0, 0, 0.06);

  --arc-dial-cue: rgba(255, 248, 230, 0.80); /* your chosen value */

  --arc-dial-etch-filter:
    drop-shadow(0 1px 1px rgba(0,0,0,0.28))
    drop-shadow(0 -1px 1px rgba(255,255,255,0.12));

  --arc-dial-stroke-candidate: rgba(255, 248, 230, 0.72);
  --arc-dial-stroke-width-candidate: 4;
  --arc-dial-fill-candidate: rgba(0, 0, 0, 0.10);

  --arc-notch-bg: rgb(255, 215, 196); /* or whatever matches stone cue */
}

/* Skin image opacity (background lives inside the SVG and rotates with the dial) */
#arc-lens-dial-root.arc-lens-skin[data-skin="stone"] #arc-lens-dial-svg .arc-lens-skin-image {
  opacity: var(--arc-skin-bg-opacity, 1);
}

/* Stone skin: apply SVG irregularity filter (ONLY if defs exist) */
#arc-lens-dial-root.arc-lens-skin[data-skin="stone"] #arc-lens-dial-svg .arc-lens-wedge,
#arc-lens-dial-root.arc-lens-skin[data-skin="stone"] #arc-lens-dial-svg .arc-lens-label,
#arc-lens-dial-root.arc-lens-skin[data-skin="stone"] #arc-lens-dial-svg .arc-lens-coming,
#arc-lens-dial-root.arc-lens-skin[data-skin="stone"] #arc-lens-dial-svg .arc-lens-cue {
  filter: url(#arc-etch) var(--arc-dial-etch-filter, none);
}

#arc-lens-dial-root.arc-lens-skin[data-skin="stone"] #arc-lens-dial-svg .arc-lens-label {
	--arc-dial-label-font: var(--font-ui);
}

/* ================================
   SKIN: TEXTILE
   ================================ */

#arc-lens-dial-root.arc-lens-skin[data-skin="textile"] {
  --arc-skin-bg-opacity: 1;

  /* Dyed/printed into cloth (not dark ink sitting on top) */
  --arc-dial-stroke: rgba(110, 84, 34, 0.33);
  --arc-dial-stroke-active: rgba(110, 84, 34, 0.48);
  --arc-dial-stroke-disabled: rgba(110, 84, 34, 0.38);

  --arc-dial-stroke-width: 3;
  --arc-dial-stroke-width-hover: 4;
  --arc-dial-stroke-width-active: 4.5;

  --arc-dial-label: rgba(116, 110, 41, 0.50);
  --arc-dial-label-disabled: rgba(110, 84, 34, 0.72);
  --arc-dial-coming: rgba(116, 110, 41, 0.34);

  /* Keep fills extremely subtle on cloth */
  --arc-dial-fill-hover: rgba(116, 110, 41, 0.035);
  --arc-dial-fill-active: rgba(116, 110, 41, 0.070);
  --arc-dial-fill-focus: rgba(116, 110, 41, 0.05);

  --arc-dial-cue: rgba(116, 110, 41, 0.42);

  /* Cloth-friendly “ink depth” (very subtle) */
  --arc-dial-etch-filter:
    drop-shadow(0 0.5px 0 rgba(255,254,207,0.10))
    drop-shadow(0 0.7px 0 rgba(0,0,0,0.08));

  /* Candidate (optional tune later) */
  --arc-dial-stroke-candidate: rgba(110, 84, 34, 0.46);
  --arc-dial-stroke-width-candidate: 4;
  --arc-dial-fill-candidate: rgba(110, 84, 34, 0.08);

  --arc-notch-bg: rgb(222, 204, 145); /* or whatever matches textile cue */
}

/* Skin image opacity */
#arc-lens-dial-root.arc-lens-skin[data-skin="textile"] #arc-lens-dial-svg .arc-lens-skin-image {
  opacity: var(--arc-skin-bg-opacity, 1);
}

/* Make overlay feel dyed/printed INTO the textile */
#arc-lens-dial-root.arc-lens-skin[data-skin="textile"] #arc-lens-dial-svg .arc-lens-wedge,
#arc-lens-dial-root.arc-lens-skin[data-skin="textile"] #arc-lens-dial-svg .arc-lens-label,
#arc-lens-dial-root.arc-lens-skin[data-skin="textile"] #arc-lens-dial-svg .arc-lens-coming,
#arc-lens-dial-root.arc-lens-skin[data-skin="textile"] #arc-lens-dial-svg .arc-lens-cue {
  mix-blend-mode: multiply;
  opacity: 0.92;
  filter: var(--arc-dial-etch-filter, none);
}

/* Dye “bleed” for labels (soft edge, not crisp vector text) */
#arc-lens-dial-root.arc-lens-skin[data-skin="textile"] #arc-lens-dial-svg .arc-lens-label {
  paint-order: stroke fill;
  stroke: rgba(110, 84, 34, 0.16);
  stroke-width: 1.25px;
  stroke-linejoin: round;
}

/* Slightly soften wedge edges so lines don’t feel machine-crisp */
#arc-lens-dial-root.arc-lens-skin[data-skin="textile"] #arc-lens-dial-svg .arc-lens-wedge {
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Tiny blur is optional; comment out if you dislike it */
  filter:
    blur(0.15px)
    drop-shadow(0 0.7px 0 rgba(0,0,0,0.06));
}

/* Textile: keep disabled status legible (blend-mode can erase faint disabled states) */
#arc-lens-dial-root.arc-lens-skin[data-skin="textile"] #arc-lens-dial-svg .arc-lens-segment.is-disabled .arc-lens-wedge,
#arc-lens-dial-root.arc-lens-skin[data-skin="textile"] #arc-lens-dial-svg .arc-lens-segment.is-disabled .arc-label-stack text {
  mix-blend-mode: normal;
  opacity: 1;
}