/**
 * Claymorphism Design System v3.0
 * Pure Claymorphism - Inflated, Fluffy 3D UI
 * 
 * Based on official claymorphism principles:
 * - https://codeadrian.github.io/clay.css/ (Adrian Bece)
 * - https://hype4.academy/tools/claymorphism-generator (Michal Malewicz)
 * 
 * Key Characteristics:
 * - NO hard offset shadows or dark drop shadows
 * - Inner highlight (white/light at top)
 * - Inner shadow (color-tinted at bottom-right)
 * - Soft colored ambient glow (matching element color)
 * - Very rounded, inflated shapes
 */

/* ========================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ======================================== */
:root {
  /* === CANDY COLOR PALETTE === */
  --candy-blue: #00C2FF;
  --candy-blue-dark: #00A3D9;
  --candy-green: #7FFF00;
  --candy-green-dark: #66CC00;
  --candy-pink: #FF69B4;
  --candy-pink-dark: #FF1493;
  --candy-yellow: #FFE135;
  --candy-yellow-dark: #D4B800;
  --candy-orange: #FF6B35;
  --candy-orange-dark: #E55A2B;
  --candy-purple: #B24BF3;
  --candy-purple-dark: #9333EA;
  --candy-red: #FF4B4B;
  --candy-red-dark: #DC2626;
  
  /* === BACKGROUND COLORS === */
  --cream: #FFFEF5;
  --cream-warm: #FFF8E7;
  --pastel-pink: #FFF0F5;
  --pastel-blue: #F0F8FF;
  --pastel-green: #F0FFF0;
  --pastel-yellow: #FFFACD;
  
  /* === TEXT COLORS (never pure black) === */
  --ink: #1A365D;
  --ink-light: #2D4A6F;
  --ink-muted: #4A6FA5;
  
  /* === PURE CLAYMORPHISM TOKENS === */
  /* Based on clay.css and Hype4 Academy generator */
  
  /* Outer ambient glow (colored, very soft) */
  --clay-glow-x: 8px;
  --clay-glow-y: 8px;
  --clay-glow-blur: 16px;
  --clay-glow-opacity: 0.5;
  
  /* Inner shadow (bottom-right, color-tinted) */
  --clay-inset-x: -6px;
  --clay-inset-y: -6px;
  --clay-inset-blur: 14px;
  --clay-inset-opacity: 0.6;
  
  /* Inner highlight (top, white) */
  --clay-highlight-y: 8px;
  --clay-highlight-blur: 20px;
  --clay-highlight-color: rgba(255, 255, 255, 1);
  
  /* Border for subtle definition */
  --clay-border-color: rgba(0, 0, 0, 0.04);
  --clay-border-width: 2px;
  
  /* Noise texture opacity */
  --clay-noise-opacity: 0.02;
  
  /* Border radius scale (very rounded, pillowy) */
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-xl: 40px;
  --radius-2xl: 48px;
  --radius-full: 9999px;
  
  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  
  /* Timing functions for tactile feel */
  --ease-squish: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   NOISE TEXTURE OVERLAY
   Creates authentic clay/rubber feel
   ======================================== */
.clay-noise::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: var(--clay-noise-opacity);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

/* ========================================
   CORE CLAY SHADOW MIXIN (Composable)
   ======================================== */

/* Standard clay shadow formula:
   1. Inner top-left highlight (light source)
   2. Inner bottom-right subtle shadow
   3. Hard offset shadow (tactile 3D)
   4. Soft ambient shadow (depth)
*/
.clay-shadow {
  box-shadow:
    /* Inner highlight - creates 3D curvature */
    inset var(--clay-highlight-size) var(--clay-highlight-size) var(--clay-highlight-blur) var(--clay-highlight-color),
    /* Inner shadow - opposite corner */
    inset calc(var(--clay-highlight-size) * -0.5) calc(var(--clay-highlight-size) * -0.5) calc(var(--clay-highlight-blur) * 0.5) var(--clay-inner-shadow-color),
    /* Hard shadow - tactile offset */
    0 var(--clay-shadow-hard-offset) var(--clay-shadow-hard-blur) var(--clay-shadow-hard-color),
    /* Soft shadow - ambient depth */
    0 var(--clay-shadow-soft-offset) var(--clay-shadow-soft-blur) var(--clay-shadow-soft-color);
}

.clay-shadow-sm {
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.8),
    inset -1px -1px 1px rgba(0, 0, 0, 0.03),
    0 2px 0 rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.06);
}

.clay-shadow-lg {
  box-shadow:
    inset 3px 3px 6px rgba(255, 255, 255, 0.9),
    inset -2px -2px 4px rgba(0, 0, 0, 0.04),
    0 6px 0 rgba(0, 0, 0, 0.12),
    0 16px 32px rgba(0, 0, 0, 0.1);
}

/* ========================================
   CLAY CARDS - Extruded 3D Look
   ======================================== */
.clay-card {
  /* Pure Claymorphism Card */
  --card-color: var(--cream);
  
  position: relative;
  background: var(--card-color);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  border: var(--clay-border-width) solid var(--clay-border-color);
  
  /* Pure Claymorphism: Inner shadows + soft ambient glow */
  box-shadow: 
    8px 8px 20px 0 rgba(0, 0, 0, 0.08),
    inset -4px -4px 12px 0 rgba(0, 0, 0, 0.04),
    inset 0 6px 16px 0 rgba(255, 255, 255, 0.9);
  
  transition: 
    transform 0.2s var(--ease-squish),
    box-shadow 0.2s var(--ease-smooth);
}

.clay-card:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 
    12px 12px 28px 0 rgba(0, 0, 0, 0.1),
    inset -4px -4px 12px 0 rgba(0, 0, 0, 0.04),
    inset 0 8px 20px 0 rgba(255, 255, 255, 1);
}

/* Card Size Variants */
.clay-card-sm {
  border-radius: var(--radius-lg);
  border-width: 2px;
  box-shadow:
    inset 1px 1px 2px var(--clay-highlight-color),
    inset -1px -1px 1px rgba(0, 0, 0, 0.02),
    0 3px 0px rgba(0, 0, 0, 0.08),
    0 6px 12px rgba(0, 0, 0, 0.06);
}

.clay-card-lg {
  border-radius: var(--radius-2xl);
  padding: var(--space-xl);
  border-width: 4px;
  box-shadow:
    inset 3px 3px 6px var(--clay-highlight-color),
    inset -2px -2px 3px rgba(0, 0, 0, 0.04),
    0 6px 0px rgba(0, 0, 0, 0.12),
    0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Card Color Variants - Pure Claymorphism with colored glow */
.clay-card-blue {
  --card-accent: var(--candy-blue);
  background: linear-gradient(135deg, #E8F9FF 0%, #D0F0FF 100%);
  border-color: color-mix(in srgb, var(--card-accent) 25%, transparent);
  box-shadow:
    8px 8px 20px 0 color-mix(in srgb, var(--card-accent) 20%, transparent),
    inset -4px -4px 12px 0 color-mix(in srgb, var(--card-accent) 15%, transparent),
    inset 0 6px 16px 0 rgba(255, 255, 255, 0.9);
}

.clay-card-green {
  --card-accent: var(--candy-green);
  background: linear-gradient(135deg, #ECFFEC 0%, #D8FFD8 100%);
  border-color: color-mix(in srgb, var(--card-accent) 25%, transparent);
  box-shadow:
    8px 8px 20px 0 color-mix(in srgb, var(--card-accent) 20%, transparent),
    inset -4px -4px 12px 0 color-mix(in srgb, var(--card-accent) 15%, transparent),
    inset 0 6px 16px 0 rgba(255, 255, 255, 0.9);
}

.clay-card-pink {
  --card-accent: var(--candy-pink);
  background: linear-gradient(135deg, #FFF0F5 0%, #FFE4EC 100%);
  border-color: color-mix(in srgb, var(--card-accent) 25%, transparent);
  box-shadow:
    8px 8px 20px 0 color-mix(in srgb, var(--card-accent) 20%, transparent),
    inset -4px -4px 12px 0 color-mix(in srgb, var(--card-accent) 15%, transparent),
    inset 0 6px 16px 0 rgba(255, 255, 255, 0.9);
}

.clay-card-yellow {
  --card-accent: var(--candy-yellow);
  background: linear-gradient(135deg, #FFFDE7 0%, #FFF9C4 100%);
  border-color: color-mix(in srgb, var(--card-accent) 25%, transparent);
  box-shadow:
    8px 8px 20px 0 color-mix(in srgb, var(--card-accent) 25%, transparent),
    inset -4px -4px 12px 0 color-mix(in srgb, var(--card-accent) 18%, transparent),
    inset 0 6px 16px 0 rgba(255, 255, 255, 0.9);
}

.clay-card-orange {
  --card-accent: var(--candy-orange);
  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
  border-color: color-mix(in srgb, var(--card-accent) 25%, transparent);
  box-shadow:
    8px 8px 20px 0 color-mix(in srgb, var(--card-accent) 20%, transparent),
    inset -4px -4px 12px 0 color-mix(in srgb, var(--card-accent) 15%, transparent),
    inset 0 6px 16px 0 rgba(255, 255, 255, 0.9);
}

.clay-card-purple {
  background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%);
  border-color: rgba(178, 75, 243, 0.25);
}

/* Flat card (no hover animation) */
.clay-card-flat {
  transition: box-shadow 0.2s var(--ease-smooth);
}
.clay-card-flat:hover {
  transform: none;
}

/* Pressable card */
.clay-card-press {
  cursor: pointer;
}
.clay-card-press:active {
  transform: translateY(2px) scale(0.99);
  box-shadow:
    inset 2px 2px 4px var(--clay-highlight-color),
    inset -1px -1px 2px rgba(0, 0, 0, 0.03),
    0 2px 0px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.06);
}

/* ========================================
   CLAY BUTTONS - Pure Claymorphism
   Based on clay.css and Hype4 Academy
   NO hard offset shadows, only inner shadows + ambient glow
   ======================================== */
.clay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-family: 'Fredoka One', 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  position: relative;
  user-select: none;
  white-space: nowrap;
  
  /* Default: Green - Theme aware */
  --btn-color: var(--candy-green);
  --btn-text: var(--ink);
  
  background: var(--btn-color);
  color: var(--btn-text);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
  
  /* Pure Claymorphism Shadow Formula:
     1. Outer: Soft colored ambient glow
     2. Inner: Color-tinted shadow (bottom-right)
     3. Inner: White highlight (top)
  */
  box-shadow:
    8px 8px 16px 0 color-mix(in srgb, var(--btn-color) 50%, transparent),
    inset -6px -6px 14px 0 color-mix(in srgb, var(--btn-color) 60%, #000),
    inset 0 8px 20px 0 rgba(255, 255, 255, 0.9);
  
  transition: 
    transform 0.2s var(--ease-squish),
    box-shadow 0.2s var(--ease-smooth),
    filter 0.2s var(--ease-smooth);
}

.clay-btn:hover {
  transform: scale(1.02);
  filter: brightness(1.05);
  box-shadow:
    10px 10px 20px 0 color-mix(in srgb, var(--btn-color) 55%, transparent),
    inset -6px -6px 14px 0 color-mix(in srgb, var(--btn-color) 60%, #000),
    inset 0 8px 20px 0 rgba(255, 255, 255, 0.95);
}

.clay-btn:active {
  transform: scale(0.98);
  box-shadow:
    4px 4px 10px 0 color-mix(in srgb, var(--btn-color) 40%, transparent),
    inset -8px -8px 18px 0 color-mix(in srgb, var(--btn-color) 70%, #000),
    inset 0 6px 16px 0 rgba(255, 255, 255, 0.7);
}

.clay-btn:disabled,
.clay-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  filter: grayscale(30%);
}

/* Button Size Variants - Pure Claymorphism */
.clay-btn-xs {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  border-radius: var(--radius-lg);
  box-shadow:
    4px 4px 8px 0 color-mix(in srgb, var(--btn-color) 40%, transparent),
    inset -3px -3px 8px 0 color-mix(in srgb, var(--btn-color) 50%, #000),
    inset 0 4px 10px 0 rgba(255, 255, 255, 0.8);
}

.clay-btn-sm {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  border-radius: var(--radius-xl);
  box-shadow:
    6px 6px 12px 0 color-mix(in srgb, var(--btn-color) 45%, transparent),
    inset -4px -4px 10px 0 color-mix(in srgb, var(--btn-color) 55%, #000),
    inset 0 6px 14px 0 rgba(255, 255, 255, 0.85);
}

.clay-btn-lg {
  padding: 1.25rem 2.5rem;
  font-size: 1.25rem;
  box-shadow:
    10px 10px 20px 0 color-mix(in srgb, var(--btn-color) 55%, transparent),
    inset -8px -8px 18px 0 color-mix(in srgb, var(--btn-color) 65%, #000),
    inset 0 10px 24px 0 rgba(255, 255, 255, 0.95);
}

.clay-btn-xl {
  padding: 1.5rem 3rem;
  font-size: 1.5rem;
  box-shadow:
    12px 12px 24px 0 color-mix(in srgb, var(--btn-color) 60%, transparent),
    inset -10px -10px 22px 0 color-mix(in srgb, var(--btn-color) 70%, #000),
    inset 0 12px 28px 0 rgba(255, 255, 255, 1);
}

/* Button Color Variants - Pure Claymorphism */
.clay-btn-green {
  --btn-color: var(--candy-green);
  --btn-text: white;
  text-shadow: none;
}

.clay-btn-blue {
  --btn-color: var(--candy-blue);
  --btn-text: white;
}

.clay-btn-pink {
  --btn-color: var(--candy-pink);
  --btn-text: white;
}

.clay-btn-yellow {
  --btn-color: var(--candy-yellow);
  --btn-text: var(--ink);
  text-shadow: none;
}

.clay-btn-orange {
  --btn-color: var(--candy-orange);
  --btn-text: white;
}

.clay-btn-purple {
  --btn-color: var(--candy-purple);
  --btn-text: white;
}

.clay-btn-red {
  --btn-color: var(--candy-red);
  --btn-text: white;
}

/* Ghost/Outline Button */
.clay-btn-ghost {
  background: var(--cream);
  color: var(--ink);
  text-shadow: none;
  --btn-shadow: rgba(0, 0, 0, 0.08);
  border: 2px solid var(--clay-border-color);
}
.clay-btn-ghost:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* Icon-only Button */
.clay-btn-icon {
  width: 3rem;
  height: 3rem;
  padding: 0;
  border-radius: var(--radius-lg);
}
.clay-btn-icon.clay-btn-sm { width: 2.25rem; height: 2.25rem; }
.clay-btn-icon.clay-btn-lg { width: 3.5rem; height: 3.5rem; }

/* ========================================
   CLAY PILLS / BADGES
   ======================================== */
.clay-pill {
  --pill-color: var(--cream);
  
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: var(--radius-full);
  background: var(--pill-color);
  color: var(--ink);
  border: 2px solid rgba(255, 255, 255, 0.3);
  
  /* Pure Claymorphism */
  box-shadow:
    4px 4px 10px 0 rgba(0, 0, 0, 0.08),
    inset -3px -3px 8px 0 rgba(0, 0, 0, 0.04),
    inset 0 4px 10px 0 rgba(255, 255, 255, 0.9);
}

.clay-pill-sm {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  gap: 0.25rem;
}

.clay-pill-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

.clay-pill-green {
  --pill-color: var(--candy-green);
  color: var(--ink);
  box-shadow:
    4px 4px 10px 0 color-mix(in srgb, var(--pill-color) 35%, transparent),
    inset -3px -3px 8px 0 color-mix(in srgb, var(--pill-color) 50%, #000),
    inset 0 4px 10px 0 rgba(255, 255, 255, 0.8);
}

.clay-pill-blue {
  --pill-color: var(--candy-blue);
  color: white;
  box-shadow:
    4px 4px 10px 0 color-mix(in srgb, var(--pill-color) 35%, transparent),
    inset -3px -3px 8px 0 color-mix(in srgb, var(--pill-color) 50%, #000),
    inset 0 4px 10px 0 rgba(255, 255, 255, 0.8);
}

.clay-pill-pink {
  --pill-color: var(--candy-pink);
  color: white;
  box-shadow:
    4px 4px 10px 0 color-mix(in srgb, var(--pill-color) 35%, transparent),
    inset -3px -3px 8px 0 color-mix(in srgb, var(--pill-color) 50%, #000),
    inset 0 4px 10px 0 rgba(255, 255, 255, 0.8);
}

.clay-pill-yellow {
  --pill-color: var(--candy-yellow);
  color: var(--ink);
  box-shadow:
    4px 4px 10px 0 color-mix(in srgb, var(--pill-color) 40%, transparent),
    inset -3px -3px 8px 0 color-mix(in srgb, var(--pill-color) 50%, #000),
    inset 0 4px 10px 0 rgba(255, 255, 255, 0.9);
}

.clay-pill-purple {
  --pill-color: var(--candy-purple);
  color: white;
  box-shadow:
    4px 4px 10px 0 color-mix(in srgb, var(--pill-color) 35%, transparent),
    inset -3px -3px 8px 0 color-mix(in srgb, var(--pill-color) 50%, #000),
    inset 0 4px 10px 0 rgba(255, 255, 255, 0.8);
}

.clay-pill-orange {
  background: linear-gradient(135deg, var(--candy-orange) 0%, #FF8A5B 100%);
  color: white;
  border-color: var(--candy-orange-dark);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.clay-pill-red {
  background: linear-gradient(135deg, var(--candy-red) 0%, #FF6B6B 100%);
  color: white;
  border-color: var(--candy-red-dark);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* ========================================
   CLAY BADGES & ICONS
   ======================================== */
.clay-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 
    inset 1px 1px 2px rgba(255, 255, 255, 0.6),
    inset -1px -1px 2px rgba(0, 0, 0, 0.05),
    2px 2px 4px rgba(0, 0, 0, 0.05);
}

.clay-badge-blue { background: var(--candy-blue-light); color: var(--ink); }
.clay-badge-green { background: var(--candy-green-light); color: var(--ink); }
.clay-badge-pink { background: var(--candy-pink-light); color: var(--ink); }
.clay-badge-yellow { background: var(--candy-yellow-light); color: var(--ink); }
.clay-badge-purple { background: var(--candy-purple-light); color: white; }
.clay-badge-orange { background: var(--candy-orange-light); color: var(--ink); }

.clay-icon-square {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.2);
  
  /* Clay style */
  box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.4),
    inset -2px -2px 4px rgba(0, 0, 0, 0.05),
    4px 4px 10px rgba(0, 0, 0, 0.05);
}

.clay-orange { background: var(--candy-orange); color: white; }
.clay-blue { background: var(--candy-blue); color: white; }
.clay-green { background: var(--candy-green); color: var(--ink); }
.clay-pink { background: var(--candy-pink); color: white; }
.clay-purple { background: var(--candy-purple); color: white; }
.clay-yellow { background: var(--candy-yellow); color: var(--ink); }

/* ========================================
   CLAY INPUT FIELDS
   ======================================== */
.clay-input {
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-lg);
  outline: none;
  
  /* Pure Claymorphism - Inset style for inputs (pressed into surface) */
  box-shadow:
    inset 4px 4px 10px 0 rgba(0, 0, 0, 0.08),
    inset -2px -2px 6px 0 rgba(255, 255, 255, 0.9);
  
  transition: 
    border-color 0.2s var(--ease-smooth), 
    box-shadow 0.2s var(--ease-smooth);
}

.clay-input::placeholder {
  color: var(--ink-muted);
  opacity: 0.7;
}

.clay-input:focus {
  border-color: var(--candy-blue);
  box-shadow:
    inset 4px 4px 10px 0 rgba(0, 0, 0, 0.08),
    inset -2px -2px 6px 0 rgba(255, 255, 255, 0.9),
    0 0 0 4px color-mix(in srgb, var(--candy-blue) 25%, transparent);
}

.clay-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.02);
}

/* Input Size Variants */
.clay-input-sm {
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md);
}

.clay-input-lg {
  padding: 1.25rem 1.5rem;
  font-size: 1.125rem;
  border-radius: var(--radius-xl);
}

/* Input States */
.clay-input-success {
  border-color: var(--candy-green);
  box-shadow:
    inset 2px 2px 6px rgba(0, 0, 0, 0.06),
    inset -1px -1px 2px rgba(255, 255, 255, 0.8),
    0 0 0 4px rgba(127, 255, 0, 0.2);
}

.clay-input-error {
  border-color: var(--candy-red);
  box-shadow:
    inset 2px 2px 6px rgba(0, 0, 0, 0.06),
    inset -1px -1px 2px rgba(255, 255, 255, 0.8),
    0 0 0 4px rgba(255, 75, 75, 0.2);
}

/* Textarea */
.clay-textarea {
  min-height: 120px;
  resize: vertical;
}

/* Select */
.clay-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231A365D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.25rem;
  padding-right: 3rem;
}

/* ========================================
   CLAY CHECKBOX & RADIO
   ======================================== */
.clay-checkbox {
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--cream);
  border: 2px solid var(--clay-border-color);
  border-radius: 0.5rem;
  cursor: pointer;
  position: relative;
  box-shadow:
    inset 1px 1px 3px rgba(0, 0, 0, 0.08),
    inset -1px -1px 2px rgba(255, 255, 255, 0.8);
  transition: all 0.2s var(--ease-squish);
}

.clay-checkbox:checked {
  background: var(--candy-green);
  border-color: var(--candy-green-dark);
  box-shadow:
    inset 1px 1px 3px rgba(255, 255, 255, 0.3),
    0 2px 0 var(--candy-green-dark),
    0 4px 8px rgba(127, 255, 0, 0.2);
}

.clay-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.clay-radio {
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--cream);
  border: 2px solid var(--clay-border-color);
  border-radius: 50%;
  cursor: pointer;
  box-shadow:
    inset 1px 1px 3px rgba(0, 0, 0, 0.08),
    inset -1px -1px 2px rgba(255, 255, 255, 0.8);
  transition: all 0.2s var(--ease-squish);
}

.clay-radio:checked {
  background: var(--cream);
  border-color: var(--candy-blue);
  box-shadow:
    inset 1px 1px 3px rgba(0, 0, 0, 0.08),
    inset -1px -1px 2px rgba(255, 255, 255, 0.8),
    0 2px 0 rgba(0, 0, 0, 0.06),
    0 0 0 3px rgba(0, 194, 255, 0.2);
}

.clay-radio:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  background: var(--candy-blue);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.4);
}

/* ========================================
   CLAY TOGGLE SWITCH
   ======================================== */
.clay-toggle {
  appearance: none;
  width: 3.5rem;
  height: 2rem;
  background: rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-full);
  cursor: pointer;
  position: relative;
  
  /* Inset track */
  box-shadow:
    inset 3px 3px 8px rgba(0, 0, 0, 0.12),
    inset -2px -2px 4px rgba(255, 255, 255, 0.2);
    
  transition: background 0.3s var(--ease-smooth);
}

.clay-toggle::after {
  content: "";
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  border-radius: 50%;
  box-shadow: 
    2px 2px 5px rgba(0, 0, 0, 0.2),
    inset -1px -1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s var(--ease-bounce);
}

.clay-toggle:checked {
  background: var(--candy-green);
}

.clay-toggle:checked::after {
  transform: translateX(1.5rem);
}

/* ========================================
   CLAY SIDEBAR & NAVIGATION
   ======================================== */
.clay-sidebar {
  background: linear-gradient(180deg, var(--theme-sidebar-from, var(--cream)) 0%, var(--theme-sidebar-to, var(--cream-warm)) 100%);
  border-right: 2px solid var(--clay-border-color);
  box-shadow: 
    inset -2px 0 4px rgba(0, 0, 0, 0.02),
    4px 0 16px rgba(0, 0, 0, 0.04);
}

.clay-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-lg);
  color: var(--ink-muted);
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s var(--ease-squish);
  border: 2px solid transparent;
  position: relative;
}

.clay-nav-item:hover {
  background: rgba(255, 255, 255, 0.5);
  color: var(--ink);
  transform: translateX(4px);
}

.clay-nav-item-active {
  background: var(--cream);
  color: var(--ink);
  box-shadow:
    6px 6px 12px 0 rgba(0, 0, 0, 0.06),
    inset -2px -2px 6px 0 rgba(0, 0, 0, 0.02),
    inset 0 4px 8px 0 rgba(255, 255, 255, 0.9);
  border: 2px solid var(--clay-border-color);
}

/* Nav Item Color Variants (Active State) */
.clay-nav-item-blue.clay-nav-item-active {
  color: var(--candy-blue-dark);
  border-color: rgba(0, 194, 255, 0.3);
}
.clay-nav-item-blue:hover { color: var(--candy-blue-dark); }

.clay-nav-item-green.clay-nav-item-active {
  color: var(--candy-green-dark);
  border-color: rgba(127, 255, 0, 0.3);
}
.clay-nav-item-green:hover { color: var(--candy-green-dark); }

.clay-nav-item-pink.clay-nav-item-active {
  color: var(--candy-pink-dark);
  border-color: rgba(255, 105, 180, 0.3);
}
.clay-nav-item-pink:hover { color: var(--candy-pink-dark); }

.clay-nav-item-yellow.clay-nav-item-active {
  color: var(--candy-yellow-dark);
  border-color: rgba(255, 225, 53, 0.3);
}
.clay-nav-item-yellow:hover { color: var(--candy-yellow-dark); }

.clay-nav-item-purple.clay-nav-item-active {
  color: var(--candy-purple-dark);
  border-color: rgba(178, 75, 243, 0.3);
}
.clay-nav-item-purple:hover { color: var(--candy-purple-dark); }

.clay-nav-item-orange.clay-nav-item-active {
  color: var(--candy-orange-dark);
  border-color: rgba(255, 107, 53, 0.3);
}
.clay-nav-item-orange:hover { color: var(--candy-orange-dark); }

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */
@media (min-width: 768px) {
  .md\:clay-card {
    /* Pure Claymorphism Card - duplicated from .clay-card */
    --card-color: var(--cream);
    
    position: relative;
    background: var(--card-color);
    border-radius: var(--radius-xl);
    border: var(--clay-border-width) solid var(--clay-border-color);
    
    /* Pure Claymorphism: Inner shadows + soft ambient glow */
    box-shadow: 
      8px 8px 20px 0 rgba(0, 0, 0, 0.08),
      inset -4px -4px 12px 0 rgba(0, 0, 0, 0.04),
      inset 0 6px 16px 0 rgba(255, 255, 255, 0.9);
    
    transition: 
      transform 0.2s var(--ease-squish),
      box-shadow 0.2s var(--ease-smooth);
  }

  .md\:clay-card:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 
      12px 12px 28px 0 rgba(0, 0, 0, 0.1),
      inset -4px -4px 12px 0 rgba(0, 0, 0, 0.04),
      inset 0 8px 20px 0 rgba(255, 255, 255, 1);
  }
}

/* ========================================
   PROGRESS BAR
   ======================================== */
.clay-progress {
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-full);
  min-height: 0.5rem;
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.05), inset -2px -2px 5px rgba(255,255,255,0.5);
  position: relative;
  overflow: hidden;
}

.clay-progress-bar {
  background-color: var(--candy-green);
  border-radius: var(--radius-full);
  height: 100%;
  box-shadow: 
    inset 0 2px 4px rgba(255,255,255,0.4), 
    inset 0 -2px 4px rgba(0,0,0,0.1);
  transition: width 0.5s var(--ease-squish);
}

.clay-progress-bar-blue { background-color: var(--candy-blue); }
.clay-progress-bar-green { background-color: var(--candy-green); }
.clay-progress-bar-pink { background-color: var(--candy-pink); }
.clay-progress-bar-yellow { background-color: var(--candy-yellow); }
.clay-progress-bar-purple { background-color: var(--candy-purple); }
.clay-progress-bar-orange { background-color: var(--candy-orange); }
.clay-progress-bar-red { background-color: var(--candy-red); }