/**
 * Tactile CSS
 * A minimal neumorphic CSS utility library with physical material themes
 *
 * @version 0.1.0
 * @license MIT
 */

/* ========================================
   THEME: Classic (Default)
   经典 Neumorphic - 柔和灰蓝
   ======================================== */

:root {
  /* Base Colors */
  --tactile-bg: #e0e5ec;
  --tactile-surface: #e0e5ec;

  /* Primary: Violet */
  --tactile-primary: #8B5CF6;
  --tactile-primary-light: #A78BFA;
  --tactile-primary-dark: #6D28D9;

  /* Text */
  --tactile-text: #374151;
  --tactile-text-muted: #6b7280;
  --tactile-text-inverse: #ffffff;

  /* Light & Shadow - Classic Neumorphic */
  --tactile-light-shadow: rgba(255, 255, 255, 0.8);
  --tactile-dark-shadow: rgba(163, 177, 198, 0.6);

  /* Primary Shadow - for colored buttons */
  --tactile-primary-light-shadow: rgba(255, 255, 255, 0.25);
  --tactile-primary-dark-shadow: rgba(109, 40, 217, 0.2);

  /* Shadow Parameters */
  --tactile-offset: 6px;
  --tactile-blur: 12px;

  /* Animation */
  --tactile-transition: all 0.2s ease;
  --tactile-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Radius */
  --tactile-radius-sm: 6px;
  --tactile-radius-md: 12px;
  --tactile-radius-lg: 20px;
  --tactile-radius-full: 9999px;

  /* Status Colors */
  --tactile-success: #10B981;
  --tactile-danger: #EF4444;
  --tactile-warning: #F59E0B;
  --tactile-info: #3B82F6;
}

/* ========================================
   THEME: Monochrome
   黑白极简 - 雪花石膏与黑曜石
   ======================================== */

:root[data-theme="mono"],
.tactile-theme-mono {
  --tactile-bg: #F4F4F5;
  --tactile-surface: #FFFFFF;

  --tactile-primary: #18181B;
  --tactile-primary-light: #27272A;
  --tactile-primary-dark: #000000;

  --tactile-text: #09090B;
  --tactile-text-muted: #71717A;
  --tactile-text-inverse: #FFFFFF;

  --tactile-light-shadow: rgba(255, 255, 255, 0.9);
  --tactile-dark-shadow: rgba(0, 0, 0, 0.1);

  --tactile-primary-light-shadow: rgba(60, 60, 60, 0.2);
  --tactile-primary-dark-shadow: rgba(0, 0, 0, 0.25);

  --tactile-success: #22C55E;
  --tactile-danger: #EF4444;
}

/* ========================================
   THEME: Iron
   铸铁 - 健身/力量感
   ======================================== */

:root[data-theme="iron"],
.tactile-theme-iron {
  --tactile-bg: #1a1a1a;
  --tactile-surface: #242424;

  --tactile-primary: #F97316;
  --tactile-primary-light: #FB923C;
  --tactile-primary-dark: #C2410C;

  --tactile-text: #fafafa;
  --tactile-text-muted: #a1a1aa;
  --tactile-text-inverse: #18181B;

  --tactile-light-shadow: rgba(60, 60, 60, 0.8);
  --tactile-dark-shadow: rgba(0, 0, 0, 0.6);

  --tactile-primary-light-shadow: rgba(251, 146, 60, 0.3);
  --tactile-primary-dark-shadow: rgba(194, 65, 12, 0.4);

  --tactile-success: #22C55E;
  --tactile-danger: #EF4444;
}

/* ========================================
   THEME: Paper
   纸张 - 阅读/记忆卡片
   ======================================== */

:root[data-theme="paper"],
.tactile-theme-paper {
  --tactile-bg: #f0ebe3;
  --tactile-surface: #f7f4ef;

  --tactile-primary: #059669;
  --tactile-primary-light: #10B981;
  --tactile-primary-dark: #047857;

  --tactile-text: #292524;
  --tactile-text-muted: #78716c;
  --tactile-text-inverse: #ffffff;

  --tactile-light-shadow: rgba(255, 255, 255, 0.9);
  --tactile-dark-shadow: rgba(41, 37, 36, 0.15);

  --tactile-primary-light-shadow: rgba(16, 185, 129, 0.3);
  --tactile-primary-dark-shadow: rgba(4, 120, 87, 0.4);

  --tactile-success: #059669;
  --tactile-danger: #DC2626;
}

/* ========================================
   THEME: Terminal
   终端 - 代码/监控面板
   ======================================== */

:root[data-theme="terminal"],
.tactile-theme-terminal {
  --tactile-bg: #0d1117;
  --tactile-surface: #161b22;

  --tactile-primary: #58a6ff;
  --tactile-primary-light: #79c0ff;
  --tactile-primary-dark: #1f6feb;

  --tactile-text: #c9d1d9;
  --tactile-text-muted: #8b949e;
  --tactile-text-inverse: #0d1117;

  --tactile-light-shadow: rgba(50, 60, 70, 0.5);
  --tactile-dark-shadow: rgba(0, 0, 0, 0.5);

  --tactile-primary-light-shadow: rgba(121, 192, 255, 0.25);
  --tactile-primary-dark-shadow: rgba(31, 111, 235, 0.4);

  --tactile-success: #3fb950;
  --tactile-danger: #f85149;
  --tactile-warning: #d29922;
}

/* ========================================
   THEME: Warm
   暖色 - 复古/舒适感
   ======================================== */

:root[data-theme="warm"],
.tactile-theme-warm {
  --tactile-bg: #d4c4b5;
  --tactile-surface: #ddd0c4;

  --tactile-primary: #c2410c;
  --tactile-primary-light: #ea580c;
  --tactile-primary-dark: #9a3412;

  --tactile-text: #1c1917;
  --tactile-text-muted: #78716c;
  --tactile-text-inverse: #ffffff;

  --tactile-light-shadow: rgba(255, 255, 255, 0.6);
  --tactile-dark-shadow: rgba(28, 25, 23, 0.2);

  --tactile-primary-light-shadow: rgba(234, 88, 12, 0.3);
  --tactile-primary-dark-shadow: rgba(154, 52, 18, 0.4);

  --tactile-success: #15803d;
  --tactile-danger: #b91c1c;
}

/* ========================================
   CORE: Soft Shadows
   ======================================== */

.tactile-outer,
.tactile-raised {
  background: var(--tactile-surface);
  box-shadow:
    calc(var(--tactile-offset) * -1) calc(var(--tactile-offset) * -1) var(--tactile-blur) var(--tactile-light-shadow),
    var(--tactile-offset) var(--tactile-offset) var(--tactile-blur) var(--tactile-dark-shadow);
}

.tactile-inner,
.tactile-sculpted {
  background: var(--tactile-surface);
  box-shadow:
    inset calc(var(--tactile-offset) * -1) calc(var(--tactile-offset) * -1) var(--tactile-blur) var(--tactile-light-shadow),
    inset var(--tactile-offset) var(--tactile-offset) var(--tactile-blur) var(--tactile-dark-shadow);
}

/* Clay - 黏土风格：双重内阴影 + 悬浮外投影 */

.tactile-clay {
  background: var(--tactile-surface);
  box-shadow:
    calc(var(--tactile-offset) * 1.2) calc(var(--tactile-offset) * 1.2) calc(var(--tactile-blur) * 1.2) rgba(0, 0, 0, 0.08),
    inset calc(var(--tactile-offset) * -1) calc(var(--tactile-offset) * -1) calc(var(--tactile-blur)) rgba(0, 0, 0, 0.05),
    inset var(--tactile-offset) var(--tactile-offset) var(--tactile-blur) var(--tactile-light-shadow);
}

.tactile-sm { --tactile-offset: 4px; --tactile-blur: 8px; }

.tactile-lg { --tactile-offset: 10px; --tactile-blur: 20px; }

.tactile-xl { --tactile-offset: 15px; --tactile-blur: 30px; }

/* ========================================
   CORE: Button
   ======================================== */

.tactile-button{
  background: var(--tactile-surface);
  color: var(--tactile-text);
  border: none;
  border-color: transparent;
  cursor: pointer;
  transition: var(--tactile-transition);
  box-shadow:
    calc(var(--tactile-offset) * -1) calc(var(--tactile-offset) * -1) var(--tactile-blur) var(--tactile-light-shadow),
    var(--tactile-offset) var(--tactile-offset) var(--tactile-blur) var(--tactile-dark-shadow);
}

.tactile-button:hover {
  filter: brightness(1.02);
}

.tactile-button:active,
.tactile-button.tactile-active {
  box-shadow:
    inset calc(var(--tactile-offset) * -0.5) calc(var(--tactile-offset) * -0.5) calc(var(--tactile-blur) * 0.5) var(--tactile-light-shadow),
    inset calc(var(--tactile-offset) * 0.5) calc(var(--tactile-offset) * 0.5) calc(var(--tactile-blur) * 0.5) var(--tactile-dark-shadow);
}

.tactile-button-primary {
  background: var(--tactile-primary);
  color: var(--tactile-text-inverse);
  border: none;
  border-color: transparent;
  box-shadow:
    0 -3px 0 var(--tactile-primary-dark) inset,
    0 3px 8px var(--tactile-primary-dark-shadow);
}

.tactile-button-primary:hover {
  background: var(--tactile-primary-light);
}

.tactile-button-primary:active {
  transform: translateY(2px);
  box-shadow:
    0 -1px 0 var(--tactile-primary-dark) inset,
    0 1px 3px var(--tactile-primary-dark-shadow);
}

/* Clay Button */

.tactile-button-clay {
  background: var(--tactile-surface);
  color: var(--tactile-text);
  border: none;
  border-radius: var(--tactile-radius-lg);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    calc(var(--tactile-offset) * 1.2) calc(var(--tactile-offset) * 1.2) calc(var(--tactile-blur) * 1.2) rgba(0, 0, 0, 0.08),
    inset calc(var(--tactile-offset) * -1) calc(var(--tactile-offset) * -1) var(--tactile-blur) rgba(0, 0, 0, 0.05),
    inset var(--tactile-offset) var(--tactile-offset) var(--tactile-blur) var(--tactile-light-shadow);
}

.tactile-button-clay:hover {
  transform: translateY(-2px);
  box-shadow:
    calc(var(--tactile-offset) * 1.5) calc(var(--tactile-offset) * 1.5) calc(var(--tactile-blur) * 1.5) rgba(0, 0, 0, 0.1),
    inset calc(var(--tactile-offset) * -1) calc(var(--tactile-offset) * -1) var(--tactile-blur) rgba(0, 0, 0, 0.05),
    inset var(--tactile-offset) var(--tactile-offset) var(--tactile-blur) var(--tactile-light-shadow);
}

.tactile-button-clay:active {
  transform: scale(0.95);
  box-shadow:
    calc(var(--tactile-offset) * 0.3) calc(var(--tactile-offset) * 0.3) calc(var(--tactile-blur) * 0.3) rgba(0, 0, 0, 0.05),
    inset calc(var(--tactile-offset) * -0.5) calc(var(--tactile-offset) * -0.5) calc(var(--tactile-blur) * 0.5) rgba(0, 0, 0, 0.04),
    inset calc(var(--tactile-offset) * 0.5) calc(var(--tactile-offset) * 0.5) calc(var(--tactile-blur) * 0.5) rgba(255, 255, 255, 0.8);
}

.tactile-button-clay-primary {
  background: var(--tactile-primary);
  color: var(--tactile-text-inverse);
  border: none;
  cursor: pointer;
  box-shadow:
    calc(var(--tactile-offset) * 1.2) calc(var(--tactile-offset) * 1.2) calc(var(--tactile-blur) * 1.2) var(--tactile-primary-dark-shadow),
    inset calc(var(--tactile-offset) * -0.6) calc(var(--tactile-offset) * -0.6) calc(var(--tactile-blur) * 0.8) var(--tactile-primary-dark),
    inset calc(var(--tactile-offset) * 0.6) calc(var(--tactile-offset) * 0.6) calc(var(--tactile-blur) * 0.8) var(--tactile-primary-light);
}

.tactile-button-clay-primary:hover {
  background: var(--tactile-primary-light);
  transform: translateY(-2px);
}

.tactile-button-clay-primary:active {
  transform: scale(0.95);
}

/* ========================================
   COMPONENT: Segmented Control
   ======================================== */

.tactile-segmented {
  display: inline-flex;
  padding: 6px;
  border-radius: var(--tactile-radius-lg);
  gap: 4px;
}

.tactile-segment {
  padding: 10px 20px;
  border: none;
  border-radius: var(--tactile-radius-md);
  background: transparent;
  color: var(--tactile-text-muted);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: var(--tactile-transition);
}

.tactile-segment:hover {
  color: var(--tactile-text);
}

.tactile-segment[active],
.tactile-segment.tactile-active {
  color: var(--tactile-text-inverse);
  background: var(--tactile-primary);
  box-shadow:
    -3px -3px 6px var(--tactile-light-shadow),
    3px 3px 6px var(--tactile-dark-shadow);
}

/* Clay Segmented */

.tactile-segmented-clay {
  display: inline-flex;
  padding: 8px;
  border-radius: var(--tactile-radius-lg);
  gap: 6px;
  background: transparent;
}

.tactile-segmented-clay .tactile-segment {
  border-radius: var(--tactile-radius-lg);
  background: var(--tactile-surface);
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.06),
    inset -3px -3px 6px rgba(0, 0, 0, 0.04),
    inset 3px 3px 6px var(--tactile-light-shadow);
}

.tactile-segmented-clay .tactile-segment:hover {
  color: var(--tactile-text);
  transform: translateY(-1px);
}

.tactile-segmented-clay .tactile-segment[active],
.tactile-segmented-clay .tactile-segment.tactile-active {
  color: var(--tactile-text-inverse);
  background: var(--tactile-primary);
  transform: none;
  box-shadow:
    4px 4px 10px var(--tactile-primary-dark-shadow),
    inset -2px -2px 4px var(--tactile-primary-dark),
    inset 2px 2px 4px var(--tactile-primary-light);
}

/* ========================================
   COMPONENT: Keypad
   ======================================== */

.tactile-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 20px;
  border-radius: var(--tactile-radius-lg);
}

.tactile-key {
  aspect-ratio: 1;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tactile-text);
  border-radius: var(--tactile-radius-md);
  background: var(--tactile-surface);
  border: none;
  cursor: pointer;
  transition: var(--tactile-transition);
  box-shadow:
    -4px -4px 8px var(--tactile-light-shadow),
    4px 4px 8px var(--tactile-dark-shadow);
}

.tactile-key:active {
  box-shadow:
    inset -2px -2px 4px var(--tactile-light-shadow),
    inset 2px 2px 4px var(--tactile-dark-shadow);
}

.tactile-key-action {
  background: var(--tactile-primary);
  color: var(--tactile-text-inverse);
}

/* Clay Keypad */

.tactile-keypad-clay {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 20px;
  border-radius: var(--tactile-radius-lg);
  background: transparent;
}

.tactile-key-clay {
  aspect-ratio: 1;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tactile-text);
  border-radius: var(--tactile-radius-lg);
  background: var(--tactile-surface);
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    5px 5px 12px rgba(0, 0, 0, 0.08),
    inset -4px -4px 8px rgba(0, 0, 0, 0.05),
    inset 4px 4px 8px var(--tactile-light-shadow);
}

.tactile-key-clay:active {
  transform: scale(0.92);
  box-shadow:
    2px 2px 4px rgba(0, 0, 0, 0.04),
    inset -2px -2px 4px rgba(0, 0, 0, 0.04),
    inset 2px 2px 4px rgba(255, 255, 255, 0.8);
}

.tactile-key-clay-action {
  background: var(--tactile-primary);
  color: var(--tactile-text-inverse);
}

/* ========================================
   COMPONENT: Keyboard
   ======================================== */

.tactile-keyboard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: var(--tactile-radius-lg);
}

.tactile-keyboard-row {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.tactile-keyboard-key {
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tactile-text);
  border-radius: 8px;
  background: var(--tactile-surface);
  border: none;
  cursor: pointer;
  transition: var(--tactile-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    -3px -3px 6px var(--tactile-light-shadow),
    3px 3px 6px var(--tactile-dark-shadow);
}

.tactile-keyboard-key:hover {
  filter: brightness(1.02);
}

.tactile-keyboard-key:active {
  box-shadow:
    inset -2px -2px 4px var(--tactile-light-shadow),
    inset 2px 2px 4px var(--tactile-dark-shadow);
}

.tactile-keyboard-key-wide {
  min-width: 72px;
}

.tactile-keyboard-key-xwide {
  min-width: 96px;
}

.tactile-keyboard-key-space {
  min-width: 220px;
}

.tactile-keyboard-key-primary {
  background: var(--tactile-primary);
  color: var(--tactile-text-inverse);
}

/* Clay Keyboard */

.tactile-keyboard-clay {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: var(--tactile-radius-lg);
}

.tactile-keyboard-clay-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.tactile-keyboard-clay-key {
  min-width: 46px;
  height: 46px;
  padding: 0 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tactile-text);
  border-radius: 12px;
  background: var(--tactile-surface);
  border: none;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.07),
    inset -3px -3px 6px rgba(0, 0, 0, 0.04),
    inset 3px 3px 6px var(--tactile-light-shadow);
}

.tactile-keyboard-clay-key:hover {
  transform: translateY(-1px);
}

.tactile-keyboard-clay-key:active {
  transform: scale(0.95);
  box-shadow:
    2px 2px 4px rgba(0, 0, 0, 0.04),
    inset -2px -2px 4px rgba(0, 0, 0, 0.04),
    inset 2px 2px 4px rgba(255, 255, 255, 0.8);
}

.tactile-keyboard-clay-key-wide {
  min-width: 78px;
}

.tactile-keyboard-clay-key-xwide {
  min-width: 104px;
}

.tactile-keyboard-clay-key-space {
  min-width: 240px;
}

.tactile-keyboard-clay-key-primary {
  background: var(--tactile-primary);
  color: var(--tactile-text-inverse);
}

/* ========================================
   COMPONENT: Radial Gauge
   ======================================== */

.tactile-gauge {
  --progress: 0%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tactile-gauge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    var(--tactile-primary) 0%,
    var(--tactile-primary) var(--progress),
    var(--tactile-surface) var(--progress),
    var(--tactile-surface) 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #fff calc(100% - 14px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #fff calc(100% - 14px));
}

.tactile-gauge-center {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: var(--tactile-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset -3px -3px 6px var(--tactile-light-shadow),
    inset 3px 3px 6px var(--tactile-dark-shadow);
}

.tactile-gauge-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--tactile-text);
}

.tactile-gauge-label {
  font-size: 0.75rem;
  color: var(--tactile-text-muted);
  margin-top: 2px;
}

/* Clay Gauge */

.tactile-gauge-clay {
  --progress: 0%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    6px 6px 14px rgba(0, 0, 0, 0.08),
    inset -4px -4px 10px rgba(0, 0, 0, 0.05),
    inset 4px 4px 10px var(--tactile-light-shadow);
}

.tactile-gauge-clay::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    var(--tactile-primary) 0%,
    var(--tactile-primary) var(--progress),
    var(--tactile-surface) var(--progress),
    var(--tactile-surface) 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #fff calc(100% - 14px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #fff calc(100% - 14px));
}

.tactile-gauge-clay-center {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: var(--tactile-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.06),
    inset -3px -3px 6px rgba(0, 0, 0, 0.04),
    inset 3px 3px 6px var(--tactile-light-shadow);
}

/* ========================================
   COMPONENT: FAB
   ======================================== */

.tactile-fab {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  border-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--tactile-text-inverse);
  background: var(--tactile-primary);
  transition: var(--tactile-transition);
  box-shadow:
    0 -4px 0 var(--tactile-primary-dark) inset,
    0 8px 16px var(--tactile-primary-dark-shadow);
}

.tactile-fab:hover {
  transform: translateY(-2px);
  box-shadow:
    0 -5px 0 var(--tactile-primary-dark) inset,
    0 12px 24px var(--tactile-primary-dark-shadow);
}

.tactile-fab:active {
  transform: translateY(3px);
  box-shadow:
    0 -1px 0 var(--tactile-primary-dark) inset,
    0 3px 6px var(--tactile-primary-dark-shadow);
}

.tactile-fab-sm { width: 48px; height: 48px; font-size: 1.25rem; }

.tactile-fab-lg { width: 80px; height: 80px; font-size: 2rem; }

/* Clay FAB */

.tactile-fab-clay {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--tactile-text-inverse);
  background: var(--tactile-primary);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    6px 6px 16px var(--tactile-primary-dark-shadow),
    inset -3px -3px 6px var(--tactile-primary-dark),
    inset 3px 3px 6px var(--tactile-primary-light);
}

.tactile-fab-clay:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    8px 8px 20px var(--tactile-primary-dark-shadow),
    inset -4px -4px 8px var(--tactile-primary-dark),
    inset 4px 4px 8px var(--tactile-primary-light);
}

.tactile-fab-clay:active {
  transform: scale(0.92);
  box-shadow:
    2px 2px 6px var(--tactile-primary-dark-shadow),
    inset -2px -2px 4px var(--tactile-primary-dark),
    inset 2px 2px 4px var(--tactile-primary-light);
}

.tactile-fab-clay-sm { width: 48px; height: 48px; font-size: 1.25rem; }

.tactile-fab-clay-lg { width: 80px; height: 80px; font-size: 2rem; }

/* ========================================
   COMPONENT: Progress Track
   ======================================== */

.tactile-track {
  height: 12px;
  border-radius: var(--tactile-radius-full);
  position: relative;
  overflow: hidden;
}

.tactile-track-fill {
  height: 100%;
  border-radius: var(--tactile-radius-full);
  background: var(--tactile-primary);
  transition: width 0.3s var(--tactile-spring);
}

/* Clay Track */

.tactile-track-clay {
  height: 14px;
  border-radius: var(--tactile-radius-full);
  position: relative;
  overflow: hidden;
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.06),
    inset -3px -3px 6px rgba(0, 0, 0, 0.04),
    inset 3px 3px 6px var(--tactile-light-shadow);
}

.tactile-track-clay-fill {
  height: 100%;
  border-radius: var(--tactile-radius-full);
  background: var(--tactile-primary);
  transition: width 0.3s var(--tactile-spring);
  box-shadow:
    inset -2px -2px 4px var(--tactile-primary-dark),
    inset 2px 2px 4px var(--tactile-primary-light);
}

/* ========================================
   COMPONENT: Slider
   ======================================== */

.tactile-slider {
  width: 100%;
  height: 24px;
  display: flex;
  align-items: center;
  position: relative;
}

.tactile-slider-track {
  width: 100%;
  height: 8px;
  border-radius: var(--tactile-radius-full);
}

.tactile-slider-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tactile-surface);
  position: absolute;
  cursor: grab;
  transition: var(--tactile-transition);
  box-shadow:
    -4px -4px 8px var(--tactile-light-shadow),
    4px 4px 8px var(--tactile-dark-shadow);
}

.tactile-slider-thumb:active {
  cursor: grabbing;
  box-shadow:
    inset -2px -2px 4px var(--tactile-light-shadow),
    inset 2px 2px 4px var(--tactile-dark-shadow);
}

/* Clay Slider */

.tactile-slider-clay {
  width: 100%;
  height: 28px;
  display: flex;
  align-items: center;
  position: relative;
}

.tactile-slider-clay-track {
  width: 100%;
  height: 10px;
  border-radius: var(--tactile-radius-full);
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.06),
    inset -3px -3px 6px rgba(0, 0, 0, 0.04),
    inset 3px 3px 6px var(--tactile-light-shadow);
}

.tactile-slider-clay-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tactile-surface);
  position: absolute;
  cursor: grab;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    5px 5px 12px rgba(0, 0, 0, 0.08),
    inset -3px -3px 6px rgba(0, 0, 0, 0.04),
    inset 3px 3px 6px var(--tactile-light-shadow);
}

.tactile-slider-clay-thumb:hover {
  transform: scale(1.05);
}

.tactile-slider-clay-thumb:active {
  cursor: grabbing;
  transform: scale(0.95);
  box-shadow:
    2px 2px 4px rgba(0, 0, 0, 0.04),
    inset -2px -2px 4px rgba(0, 0, 0, 0.04),
    inset 2px 2px 4px rgba(255, 255, 255, 0.8);
}

/* ========================================
   COMPONENT: Input
   ======================================== */

.tactile-input {
  width: 100%;
  padding: 0.875rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--tactile-text);
  background: var(--tactile-surface);
  border: none;
  border-radius: var(--tactile-radius-lg);
  outline: none;
  transition: var(--tactile-transition);
  box-shadow:
    inset -4px -4px 8px var(--tactile-light-shadow),
    inset 4px 4px 8px var(--tactile-dark-shadow);
}

.tactile-input::placeholder {
  color: var(--tactile-text-muted);
}

.tactile-input:focus {
  box-shadow:
    inset -2px -2px 4px var(--tactile-light-shadow),
    inset 2px 2px 4px var(--tactile-dark-shadow),
    0 0 0 3px var(--tactile-primary);
}

/* Clay Input */

.tactile-input-clay {
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 0.9375rem;
  color: var(--tactile-text);
  background: var(--tactile-surface);
  border: none;
  border-radius: var(--tactile-radius-lg);
  outline: none;
  transition: all 0.2s ease;
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.05),
    inset -3px -3px 8px rgba(0, 0, 0, 0.04),
    inset 3px 3px 8px var(--tactile-light-shadow);
}

.tactile-input-clay::placeholder {
  color: var(--tactile-text-muted);
}

.tactile-input-clay:focus {
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.05),
    inset -3px -3px 8px rgba(0, 0, 0, 0.04),
    inset 3px 3px 8px var(--tactile-light-shadow),
    0 0 0 3px var(--tactile-primary);
}

/* ========================================
   COMPONENT: Card
   ======================================== */

.tactile-card {
  padding: 1.5rem;
  border-radius: var(--tactile-radius-lg);
  background: var(--tactile-surface);
}

/* Clay Card */

.tactile-card-clay {
  padding: 1.5rem;
  border-radius: var(--tactile-radius-xl, 24px);
  background: var(--tactile-surface);
  box-shadow:
    8px 8px 20px rgba(0, 0, 0, 0.08),
    inset -5px -5px 12px rgba(0, 0, 0, 0.05),
    inset 5px 5px 12px var(--tactile-light-shadow);
}

/* ========================================
   COMPONENT: Modal
   ======================================== */

.tactile-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
}

.tactile-modal-overlay.tactile-open {
  opacity: 1;
  visibility: visible;
}

.tactile-modal {
  background: var(--tactile-surface);
  border-radius: var(--tactile-radius-lg);
  padding: 1.5rem;
  max-width: 420px;
  width: 100%;
  box-shadow:
    -8px -8px 20px var(--tactile-light-shadow),
    8px 8px 20px var(--tactile-dark-shadow),
    0 20px 40px rgba(0, 0, 0, 0.15);
  transform: translateY(20px) scale(0.95);
  transition: transform 0.3s var(--tactile-spring);
}

.tactile-modal-overlay.tactile-open .tactile-modal {
  transform: translateY(0) scale(1);
}

.tactile-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.tactile-modal-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--tactile-text);
  margin: 0;
}

.tactile-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  border-color: transparent;
  background: var(--tactile-surface);
  color: var(--tactile-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--tactile-transition);
  box-shadow:
    -2px -2px 5px var(--tactile-light-shadow),
    2px 2px 5px var(--tactile-dark-shadow);
}

.tactile-modal-close:hover {
  color: var(--tactile-text);
}

.tactile-modal-close:active{
  box-shadow:
    inset -1px -1px 3px var(--tactile-light-shadow),
    inset 1px 1px 3px var(--tactile-dark-shadow);
}

.tactile-modal-body {
  color: var(--tactile-text-muted);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.tactile-modal-footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

/* ========================================
   COMPONENT: Toast
   ======================================== */

.tactile-toast-container {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 1100;
  pointer-events: none;
}

.tactile-toast {
  background: var(--tactile-surface);
  border-radius: var(--tactile-radius-md);
  padding: 0.875rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow:
    -4px -4px 10px var(--tactile-light-shadow),
    4px 4px 10px var(--tactile-dark-shadow),
    0 8px 20px rgba(0, 0, 0, 0.1);
  pointer-events: auto;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s var(--tactile-spring), opacity 0.3s ease;
}

.tactile-toast.tactile-toast-show {
  transform: translateY(0);
  opacity: 1;
}

.tactile-toast-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tactile-toast-icon svg {
  width: 14px;
  height: 14px;
  stroke: white;
}

.tactile-toast-content {
  flex: 1;
}

.tactile-toast-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--tactile-text);
}

.tactile-toast-message {
  font-size: 0.8125rem;
  color: var(--tactile-text-muted);
}

.tactile-toast-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  border-color: transparent;
  background: transparent;
  color: var(--tactile-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: var(--tactile-transition);
}

.tactile-toast-close:hover {
  color: var(--tactile-text);
}

/* Toast variants */

.tactile-toast-success .tactile-toast-icon {
  background: var(--tactile-success);
}

.tactile-toast-danger .tactile-toast-icon {
  background: var(--tactile-danger);
}

.tactile-toast-warning .tactile-toast-icon {
  background: var(--tactile-warning);
}

.tactile-toast-info .tactile-toast-icon {
  background: var(--tactile-info);
}

/* ========================================
   ICON & TEXT EFFECTS
   ======================================== */

.tactile-icon-raised {
  filter:
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.3))
    drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2));
}

.tactile-icon-sculpted {
  color: var(--tactile-text-muted);
  filter: drop-shadow(0 1px 0 var(--tactile-light-shadow));
}

.tactile-text-sculpted {
  color: var(--tactile-text-muted);
  text-shadow: 0 1px 0 var(--tactile-light-shadow);
}

/* ========================================
   COLOR UTILITIES
   ======================================== */

.tactile-primary { background: var(--tactile-primary); color: var(--tactile-text-inverse); }

.tactile-success { background: var(--tactile-success); color: var(--tactile-text-inverse); }

.tactile-danger { background: var(--tactile-danger); color: var(--tactile-text-inverse); }

.tactile-warning { background: var(--tactile-warning); color: var(--tactile-text-inverse); }

.tactile-info { background: var(--tactile-info); color: var(--tactile-text-inverse); }

/* ========================================
   BASE
   ======================================== */

.tactile {
  background: var(--tactile-bg);
  color: var(--tactile-text);
  transition: background 0.3s ease;
}

body.tactile {
  min-height: 100vh;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}