/*
 * Skeuomorphic button recipe.
 *
 * Every tone is the same five layers, set through custom properties:
 *   --face   gradient face, lighter on top
 *   --edge   1px border a step darker than the face
 *   --sheen  inset highlights inside the border: a light line on top, a
 *            dark line at the bottom. They sit in the button's own
 *            box-shadow, so their corners follow the inner radius
 *            (outer radius minus the border) instead of the outer one.
 *   --drop   outer shadow: a tight contact shadow plus a soft lift
 *   --ink    label color
 * Pressed, the face sinks 1px, the drop shrinks to a contact line and the
 * sheen turns into an inner shadow.
 *
 * Every length here is for the 14px label size. To show the buttons larger,
 * scale the whole set (zoom) so the material grows with the type.
 */
.sk {
  --face: transparent;
  --edge: transparent;
  --ink: #1f2937;
  --ink-shadow: none;
  --drop: 0 0 0 transparent;
  --sheen: inset 0 0 0 transparent;
  --face-hover: var(--face);
  --edge-hover: var(--edge);
  --drop-hover: var(--drop);
  --face-pressed: var(--face);
  --drop-pressed: 0 0 0 transparent;
  --sheen-pressed: inset 0 0 0 transparent;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--face);
  color: var(--ink);
  font: 600 14px/1 var(--tip-font-sans);
  text-shadow: var(--ink-shadow);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--sheen), var(--drop);
  transition:
    transform 120ms cubic-bezier(0.2, 0.9, 0.2, 1),
    box-shadow 140ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease;
}

.sk svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-inline-start: -2px;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sk:hover,
.sk[data-state="hover"] {
  background: var(--face-hover);
  border-color: var(--edge-hover);
  box-shadow: var(--sheen), var(--drop-hover);
}

.sk:active,
.sk[data-state="pressed"] {
  transform: translateY(1px);
  background: var(--face-pressed);
  box-shadow: var(--sheen-pressed), var(--drop-pressed);
}

/* Primary: Lumno's near-black slate. */
.sk-primary {
  --face: linear-gradient(180deg, #404859 0%, #273042 100%);
  --face-hover: linear-gradient(180deg, #4a5467 0%, #2f3a4f 100%);
  --face-pressed: linear-gradient(180deg, #2b3345 0%, #343d50 100%);
  --edge: #12161f;
  --edge-hover: #12161f;
  --ink: #ffffff;
  --ink-shadow: 0 -1px 0 rgba(0, 0, 0, 0.28);
  --drop: 0 1px 2px rgba(15, 23, 42, 0.18), 0 4px 10px -3px rgba(15, 23, 42, 0.28);
  --drop-hover: 0 2px 3px rgba(15, 23, 42, 0.2), 0 8px 16px -5px rgba(15, 23, 42, 0.34);
  --drop-pressed: 0 1px 1px rgba(15, 23, 42, 0.14);
  --sheen:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 1px 3px rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
  /* Same count as --sheen, so the press animates layer by layer instead of jumping. */
  --sheen-pressed: inset 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 0 0 transparent, inset 0 0 0 transparent;
}

/* Secondary: a raised white key. */
.sk-secondary {
  --face: linear-gradient(180deg, #ffffff 0%, #f4f5f7 100%);
  --face-hover: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  --face-pressed: linear-gradient(180deg, #eef0f3 0%, #f5f6f8 100%);
  --edge: rgba(15, 23, 42, 0.14);
  --edge-hover: rgba(15, 23, 42, 0.18);
  --ink: #1f2937;
  --drop: 0 1px 2px rgba(15, 23, 42, 0.06), 0 3px 8px -3px rgba(15, 23, 42, 0.12);
  --drop-hover: 0 2px 3px rgba(15, 23, 42, 0.07), 0 6px 14px -5px rgba(15, 23, 42, 0.18);
  --drop-pressed: 0 1px 0 rgba(255, 255, 255, 0.9);
  --sheen: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(15, 23, 42, 0.06);
  --sheen-pressed: inset 0 1px 2px rgba(15, 23, 42, 0.12), inset 0 0 0 transparent;
}

/* Tertiary: a soft gray key, lower than the white one. */
.sk-tertiary {
  --face: linear-gradient(180deg, #f3f4f6 0%, #e7e9ec 100%);
  --face-hover: linear-gradient(180deg, #eef0f2 0%, #e1e4e8 100%);
  --face-pressed: linear-gradient(180deg, #dfe2e6 0%, #e9ebee 100%);
  --edge: rgba(15, 23, 42, 0.1);
  --edge-hover: rgba(15, 23, 42, 0.14);
  --ink: #1f2937;
  --ink-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  --drop: 0 1px 2px rgba(15, 23, 42, 0.06);
  --drop-hover: 0 2px 6px -1px rgba(15, 23, 42, 0.12);
  --drop-pressed: 0 1px 0 rgba(255, 255, 255, 0.9);
  --sheen: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(15, 23, 42, 0.06);
  --sheen-pressed: inset 0 1px 2px rgba(15, 23, 42, 0.16), inset 0 0 0 transparent;
}

/* Ghost: flat at rest; pressed it reads as a small well cut into the surface. */
.sk-ghost {
  --ink: #374151;
  --face-hover: rgba(15, 23, 42, 0.045);
  --face-pressed: rgba(15, 23, 42, 0.07);
  --edge-hover: rgba(15, 23, 42, 0.05);
  --drop-pressed: 0 1px 0 rgba(255, 255, 255, 0.9);
  --sheen-pressed: inset 0 1px 2px rgba(15, 23, 42, 0.14);
}

/* Text: no face at all; the press shows in the ink and a 1px sink. */
.sk-text {
  --ink: #374151;
  padding: 0 4px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(55, 65, 81, 0.28);
  text-underline-offset: 4px;
}

.sk-text svg { margin-inline: -1px 0; }

.sk-text:hover,
.sk-text[data-state="hover"] {
  text-decoration-color: rgba(55, 65, 81, 0.7);
}

.sk-text:hover svg,
.sk-text[data-state="hover"] svg,
.sk-text[data-state="pressed"] svg {
  transform: translateX(2px);
}

.sk-text:active,
.sk-text[data-state="pressed"] {
  --ink: #111827;
}