/* shape-styles.css — surface styles for Settings > Appearance > Shape & Depth
 * (2026-10-01, Jo: "skeuomorphism, neumorphism, glassmorphism, claymorphism,
 * liquid glass, spatial UI … maximize customizability").
 *
 * The older presets (Sharp … Tonal, dashboard-app.css) only move the radius
 * and shadow tokens. These four restyle the SURFACE itself: how a card, a
 * button, a field and a sheet feel. Every selector starts with
 * :root[data-shape="<id>"] (tests/shape-styles-2026-10-01.test.js holds that).
 *
 * Rules every style keeps:
 *   - colour comes only from the current theme's tokens (--s, --s2, --t,
 *     --orange …) via color-mix, so any theme, light or dark, still works;
 *   - never layout or size (no width/height/padding/margin/display/font-size);
 *   - blur only on the few large surfaces, never on pipeline cards (.k-card),
 *     which can number in the hundreds on a phone;
 *   - motion only when the OS and the app both allow it.
 *
 * Surfaces: cards (.w-card .stat-card .ui-card .ui-panel .panel .k-card
 * .cl-card .ui-tile .ui-row), buttons (.btn, .ui-seg), fields (.ui-input .ui-field
 * .ui-field-sm), sheets (.modal).
 */

/* ══ Clay: puffy, soft, rounded; light from above, shade below ══════════════ */
:root[data-shape="clay"] {
  --r-btn: 16px; --r-card: 24px; --r-input: 14px; --r-modal: 28px;
  --elevation-card: none; --elevation-card-hover: none; --elevation-modal: none;
  --shape-ease: cubic-bezier(.34,1.56,.64,1);
  --shape-dur: .22s;
}
:root[data-shape="clay"] :is(.w-card, .stat-card, .ui-card, .ui-panel, .panel, .k-card, .cl-card, .ui-tile, .ui-row) {
  border-color: transparent;
  border-radius: var(--r-card);
  box-shadow:
    inset 0 6px 12px color-mix(in srgb, #ffffff 16%, transparent),
    inset 0 -8px 14px color-mix(in srgb, #000000 22%, transparent),
    0 14px 26px -14px color-mix(in srgb, #000000 55%, transparent);
}
:root[data-shape="clay"] :is(.btn, .ui-seg) {
  border-color: transparent;
  border-radius: var(--r-btn);
  box-shadow:
    inset 0 3px 6px color-mix(in srgb, #ffffff 26%, transparent),
    inset 0 -4px 8px color-mix(in srgb, #000000 24%, transparent),
    0 8px 14px -8px color-mix(in srgb, #000000 50%, transparent);
}
:root[data-shape="clay"] :is(.ui-input, .ui-field, .ui-field-sm) {
  border-color: transparent;
  border-radius: var(--r-input);
  box-shadow: inset 0 3px 7px color-mix(in srgb, #000000 28%, transparent), inset 0 -2px 4px color-mix(in srgb, #ffffff 10%, transparent);
}
:root[data-shape="clay"] .modal {
  border-radius: var(--r-modal);
  box-shadow:
    inset 0 8px 16px color-mix(in srgb, #ffffff 14%, transparent),
    inset 0 -10px 18px color-mix(in srgb, #000000 20%, transparent),
    0 30px 60px -20px color-mix(in srgb, #000000 60%, transparent);
}

/* ══ Liquid Glass: translucent, blurred, a specular sheen and a lit rim ═════ */
:root[data-shape="liquid"] {
  --r-btn: 14px; --r-card: 20px; --r-input: 12px; --r-modal: 26px;
  --elevation-card: 0 18px 40px -22px rgba(0,0,0,.6);
  --elevation-card-hover: 0 22px 46px -20px rgba(0,0,0,.65);
  --elevation-modal: 0 30px 70px -24px rgba(0,0,0,.65);
  --shape-dur: .2s;
}
:root[data-shape="liquid"] :is(.w-card, .stat-card, .ui-card, .ui-panel, .panel, .k-card, .cl-card, .ui-tile, .ui-row, .modal) {
  background-color: color-mix(in srgb, var(--s2) 74%, transparent);
  background-image: linear-gradient(135deg, color-mix(in srgb, #ffffff 16%, transparent), transparent 42%);
  border: 1px solid color-mix(in srgb, #ffffff 20%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 38%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #ffffff 8%, transparent),
    var(--elevation-card);
}
/* Blur only where there are few of them. */
:root[data-shape="liquid"] :is(.w-card, .stat-card, .ui-card, .panel, .modal) {
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
}
:root[data-shape="liquid"] :is(.btn, .ui-seg) {
  border-radius: var(--r-btn);
  border: 1px solid color-mix(in srgb, #ffffff 24%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 40%, transparent), 0 6px 16px -8px rgba(0,0,0,.55);
}
:root[data-shape="liquid"] :is(.ui-input, .ui-field, .ui-field-sm) {
  background-color: color-mix(in srgb, var(--s) 70%, transparent);
  border: 1px solid color-mix(in srgb, #ffffff 18%, transparent);
  border-radius: var(--r-input);
}

/* ══ Skeuo: real materials: a raised bevelled panel with a stitched inner
      edge, glossy buttons, fields carved into the surface ══════════════════ */
:root[data-shape="skeuo"] {
  --r-btn: 8px; --r-card: 12px; --r-input: 6px; --r-modal: 14px;
  --elevation-card: 0 2px 0 rgba(0,0,0,.35), 0 10px 18px -10px rgba(0,0,0,.6);
  --elevation-card-hover: 0 2px 0 rgba(0,0,0,.35), 0 14px 22px -10px rgba(0,0,0,.65);
  --elevation-modal: 0 3px 0 rgba(0,0,0,.4), 0 30px 60px -20px rgba(0,0,0,.7);
}
:root[data-shape="skeuo"] :is(.w-card, .stat-card, .ui-card, .ui-panel, .panel, .cl-card, .ui-tile) {
  background-image: linear-gradient(180deg, color-mix(in srgb, #ffffff 9%, transparent), transparent 38%, color-mix(in srgb, #000000 10%, transparent));
  border: 1px solid color-mix(in srgb, #000000 45%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent), var(--elevation-card);
  outline: 1px dashed color-mix(in srgb, var(--t) 20%, transparent);
  outline-offset: -6px;
}
:root[data-shape="skeuo"] .k-card {
  background-image: linear-gradient(180deg, color-mix(in srgb, #ffffff 8%, transparent), transparent 45%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent), 0 2px 0 rgba(0,0,0,.3);
}
:root[data-shape="skeuo"] :is(.btn, .ui-seg) {
  background-image: linear-gradient(180deg, color-mix(in srgb, #ffffff 22%, transparent), transparent 50%, color-mix(in srgb, #000000 14%, transparent));
  border: 1px solid color-mix(in srgb, #000000 50%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 40%, transparent), 0 2px 0 rgba(0,0,0,.4);
}
:root[data-shape="skeuo"] :is(.btn, .ui-seg):active {
  background-image: linear-gradient(180deg, color-mix(in srgb, #000000 14%, transparent), transparent 60%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.45);
}
:root[data-shape="skeuo"] :is(.ui-input, .ui-field, .ui-field-sm) {
  border: 1px solid color-mix(in srgb, #000000 50%, transparent);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.4), 0 1px 0 color-mix(in srgb, #ffffff 14%, transparent);
}

/* ══ Spatial: frosted panels floating at different depths, generous corners,
      a gentle lift under the pointer ════════════════════════════════════════ */
:root[data-shape="spatial"] {
  --r-btn: 999px; --r-card: 26px; --r-input: 16px; --r-modal: 32px;
  --elevation-card: 0 1px 1px rgba(0,0,0,.08), 0 10px 20px -10px rgba(0,0,0,.35), 0 34px 64px -34px rgba(0,0,0,.55);
  --elevation-card-hover: 0 1px 1px rgba(0,0,0,.08), 0 16px 28px -12px rgba(0,0,0,.4), 0 44px 80px -36px rgba(0,0,0,.6);
  --elevation-modal: 0 2px 2px rgba(0,0,0,.1), 0 50px 100px -30px rgba(0,0,0,.7);
  --shape-ease: cubic-bezier(.2,.8,.2,1);
  --shape-dur: .24s;
}
:root[data-shape="spatial"] :is(.w-card, .stat-card, .ui-card, .ui-panel, .panel, .k-card, .cl-card, .ui-tile, .ui-row, .modal) {
  background-color: color-mix(in srgb, var(--s2) 82%, transparent);
  border: 1px solid color-mix(in srgb, #ffffff 12%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent), var(--elevation-card);
}
:root[data-shape="spatial"] :is(.w-card, .stat-card, .ui-card, .panel, .modal) {
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
:root[data-shape="spatial"] :is(.btn, .ui-seg) {
  border-radius: var(--r-btn);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent), 0 6px 14px -8px rgba(0,0,0,.5);
}
:root[data-shape="spatial"] :is(.ui-input, .ui-field, .ui-field-sm) {
  background-color: color-mix(in srgb, var(--s) 78%, transparent);
  border: 1px solid color-mix(in srgb, #ffffff 14%, transparent);
  border-radius: var(--r-input);
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-shape="spatial"]:not([data-motion="reduce"]) :is(.w-card, .stat-card, .ui-card, .k-card) {
    transition: transform var(--shape-dur) var(--shape-ease), box-shadow var(--shape-dur) var(--shape-ease);
  }
  :root[data-shape="spatial"]:not([data-motion="reduce"]) :is(.w-card, .stat-card, .ui-card, .k-card):hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent), var(--elevation-card-hover);
  }
}