/*
 * Litemorphism Theme
 * ==================
 * A warm, soft neumorphism (soft UI) light theme
 * 
 * Design Characteristics:
 * - Soft, extruded appearance with dual shadows (dark + light)
 * - Warm cream/beige color palette
 * - Subtle embossed/debossed text effects
 * - Noise texture overlay for depth
 * 
 * Usage: Import this file or copy the :root variables into your project
 * Then use semantic classes (.btn-primary, .panel, .card, etc.)
 */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
  /* ----- Core Colors ----- */
  --color-primary: #b56b6b;
  --color-primary-light: #c49a9a;
  --color-primary-hover: #9a5a5a;
  --color-accent: #e0a844;
  --color-white: #ffffff;
  
  /* ----- Text Colors ----- */
  --color-text: #4a4038;
  --color-text-secondary: #6b5e55;
  --color-text-muted: #8c7e74;
  
  /* ----- Background Colors ----- */
  --bg-base: #f5f0eb;
  --bg-surface: #f5f0eb;
  --bg-surface-alt: #efe9e3;
  --bg-panel: rgba(245, 240, 235, 0.98);
  --bg-card: #f5f0eb;
  --bg-overlay: rgba(74, 64, 56, 0.4);
  --bg-input: var(--bg-surface);
  
  /* ----- Neumorphic Shadow Colors ----- */
  --shadow-dark: rgba(0, 0, 0, 0.18);
  --shadow-light: rgba(255, 255, 255, 0.85);
  --shadow-primary: rgba(181, 107, 107, 0.2);
  
  /* ----- Special States ----- */
  --surface-peak: #ffd6d6;
  --peak-shadow-dark: #c49a9a;
  --peak-shadow-light: #fff5f5;
  
  /* ----- Border Colors ----- */
  --border-primary: rgba(74, 64, 56, 0.15);
  --border-primary-hover: rgba(74, 64, 56, 0.3);
  --border-muted: rgba(74, 64, 56, 0.1);
  
  /* ----- Semantic Colors ----- */
  --color-danger: #c74560;
  --color-danger-hover: #a83a50;
  --color-success: #2a9d5c;
  --color-warning: #d97706;
  
  /* ----- Star/Favorite Colors ----- */
  --star-off: #d4cdc4;
  --star-on: #e0a844;
  
  /* ----- Text Effects ----- */
  --text-shadow-deboss: 0 1px 0 rgba(255, 255, 255, 0.9);
  
  /* ----- Grain Texture ----- */
  --grain-opacity: 0.8;
  
  /* ----- Clock/UI Colors ----- */
  --clock-tick: #d8d0c8;
  --clock-tick-major: #c4bbb0;
  --needle: #b56b6b;
  --needle-dot: #b56b6b;
  --clock-digital: #6b5e55;
  --top-semicircle: rgba(0,0,0,0.06);
  --peak-fill: rgba(180, 140, 130, 0.3);
  --peak-stroke: rgba(160, 120, 110, 0.35);
  --header-bg: rgba(245, 240, 235, 0.85);
  --provider-icon-bg: #e8e0d8;
  --provider-icon-text: #4a4038;
  
  /* ----- Icon Sizes ----- */
  --icon-size-xs: 12px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 48px;
  --icon-size-xxl: 64px;
  
  /* ----- Spacing Scale ----- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 48px;
  --space-5xl: 60px;
  
  /* ----- Border Radius ----- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 999px;
  --radius-circle: 50%;
  
  /* ----- Typography ----- */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif;
  --font-family-mono: 'SF Mono', 'Fira Code', monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 28px;
  
  /* ----- Transitions ----- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.35s ease;
  --transition-modal: 0.4s ease;
  
  /* ----- Z-Index Scale ----- */
  --z-base: 1;
  --z-overlay: 100;
  --z-dock: 1000;
  --z-modal-backdrop: 1998;
  --z-modal: 1999;
  --z-notification: 2000;
  --z-fullscreen: 9999;
}

/* ============================================
   Base Styles
   ============================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  height: 100%;
  background: var(--bg-base);
}

body {
  font-family: var(--font-family);
  background: var(--bg-base);
  min-height: 100vh;
  color: var(--color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Grain texture overlay */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: var(--z-fullscreen);
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  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%3CfeColorMatrix type='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ============================================
   Neumorphic Utility Classes
   ============================================ */

/* Raised/Extruded effect */
.neumorphic-raised {
  background: var(--bg-surface);
  border: none;
  border-radius: var(--radius-2xl);
  box-shadow: 
    5px 5px 10px var(--shadow-dark),
    -1px -1px 0 var(--shadow-light);
}

/* Pressed/Inset effect */
.neumorphic-pressed {
  background: var(--bg-surface);
  border: none;
  border-radius: var(--radius-2xl);
  box-shadow: 
    inset 2px 2px 5px var(--shadow-dark),
    inset -1px -1px 0 var(--shadow-light);
}

/* ============================================
   Button Styles
   ============================================ */

/* Primary Button - Raised */
.btn-primary {
  background: var(--bg-surface);
  color: var(--color-primary);
  border: none;
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  font-weight: 600;
  transition: all var(--transition-base);
  box-shadow: 
    3px 3px 6px var(--shadow-dark),
    -2px -2px 0 var(--shadow-light);
  text-shadow: var(--text-shadow-deboss);
}
.btn-primary:hover {
  transform: scale(1.02);
}
.btn-primary:active {
  box-shadow: 
    inset 2px 2px 5px var(--shadow-dark),
    inset -1px -1px 0 var(--shadow-light);
  transform: scale(0.98);
}

/* Secondary Button - Subtle */
.btn-secondary {
  background: var(--bg-surface);
  color: var(--color-text-secondary);
  border: none;
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  font-weight: 500;
  transition: all var(--transition-base);
  box-shadow: 
    2px 2px 4px var(--shadow-dark),
    -1px -1px 0 var(--shadow-light);
  text-shadow: var(--text-shadow-deboss);
}
.btn-secondary:hover {
  color: var(--color-primary);
}
.btn-secondary:active {
  box-shadow: 
    inset 2px 2px 4px var(--shadow-dark),
    inset -1px -1px 0 var(--shadow-light);
}

/* Danger Button */
.btn-danger {
  background: var(--bg-surface);
  color: var(--color-danger);
  border: none;
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  font-weight: 600;
  transition: all var(--transition-base);
  box-shadow: 
    3px 3px 6px var(--shadow-dark),
    -1px -1px 0 var(--shadow-light);
}
.btn-danger:hover {
  color: var(--color-danger-hover);
}
.btn-danger:active {
  box-shadow: 
    inset 2px 2px 5px var(--shadow-dark),
    inset -1px -1px 0 var(--shadow-light);
}

/* Icon Button */
.btn-icon {
  background: var(--bg-surface);
  color: var(--color-text-secondary);
  border: none;
  border-radius: var(--radius-circle);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: 
    2px 2px 4px var(--shadow-dark),
    -1px -1px 0 var(--shadow-light);
}
.btn-icon:hover {
  transform: scale(1.05);
  color: var(--color-primary);
}
.btn-icon:active {
  box-shadow: 
    inset 2px 2px 4px var(--shadow-dark),
    inset -1px -1px 0 var(--shadow-light);
  transform: scale(0.95);
}

/* ============================================
   Card Styles
   ============================================ */
.card {
  background: var(--bg-surface);
  border: none;
  border-radius: var(--radius-2xl);
  padding: var(--space-2xl);
  box-shadow: 
    5px 5px 10px var(--shadow-dark),
    -1px -1px 0 var(--shadow-light);
  transition: all var(--transition-base);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 
    8px 8px 16px var(--shadow-dark),
    -2px -2px 0 var(--shadow-light);
}

.card-body {
  padding: var(--space-md);
}

.card-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
  text-shadow: var(--text-shadow-deboss);
}

/* Card with accent/peak state */
.card.accent {
  background: var(--surface-peak);
  box-shadow: 
    inset 4px 4px 6px var(--peak-shadow-dark),
    inset -1px -1px 0 var(--peak-shadow-light);
}

/* ============================================
   Panel & Modal Styles
   ============================================ */
.panel {
  background: var(--bg-surface);
  border: none;
  border-radius: var(--radius-2xl);
  box-shadow: 
    8px 8px 16px var(--shadow-dark),
    -2px -2px 0 var(--shadow-light);
}

.panel-content {
  padding: var(--space-2xl);
}

/* Modal */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-overlay);
  z-index: var(--z-modal-backdrop);
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-surface);
  border: none;
  border-radius: var(--radius-2xl);
  box-shadow: 
    10px 10px 30px var(--shadow-dark),
    -2px -2px 0 var(--shadow-light);
  color: var(--color-text);
  max-width: 90%;
  width: 400px;
  z-index: var(--z-modal);
}

.modal-header {
  padding: var(--space-2xl);
  border-bottom: 1px solid var(--border-muted);
  color: var(--color-text);
}

.modal-body {
  padding: var(--space-2xl);
  color: var(--color-text);
}

.modal-footer {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-2xl) var(--space-2xl);
}

/* Close button */
.btn-close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  background: var(--bg-surface);
  border: none;
  color: var(--color-text-muted);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--radius-circle);
  transition: all var(--transition-base);
  box-shadow: 
    2px 2px 4px var(--shadow-dark),
    -1px -1px 0 var(--shadow-light);
}
.btn-close:hover {
  color: var(--color-text);
}
.btn-close:active {
  box-shadow: 
    inset 2px 2px 4px var(--shadow-dark),
    inset -1px -1px 0 var(--shadow-light);
}

/* ============================================
   Form Controls
   ============================================ */

/* Input Field - Inset */
.input-inset {
  background: var(--bg-surface);
  border: none;
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  outline: none;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-xl);
  box-shadow: 
    inset 2px 2px 5px var(--shadow-dark),
    inset -1px -1px 0 var(--shadow-light);
}
.input-inset::placeholder {
  color: var(--color-text-muted);
}

/* Search Bar */
.search-bar {
  position: relative;
  width: 100%;
  max-width: 450px;
  background: var(--bg-surface);
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: 
    inset 2px 2px 5px var(--shadow-dark),
    inset -1px -1px 0 var(--shadow-light);
}

.search-input {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background: transparent;
  border: none;
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  outline: none;
}
.search-input::placeholder {
  color: var(--color-text-muted);
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-surface);
  transition: var(--transition-slow);
  border-radius: var(--radius-3xl);
  box-shadow: 
    inset 2px 2px 4px var(--shadow-dark),
    inset -1px -1px 0 var(--shadow-light);
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: var(--shadow-light);
  transition: var(--transition-slow);
  border-radius: var(--radius-circle);
  box-shadow: 1px 1px 3px var(--shadow-dark);
}
.toggle-switch input:checked + .toggle-slider {
  background-color: var(--bg-surface);
}
.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
  background-color: var(--color-primary);
}

/* Range Slider */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--bg-surface);
  border-radius: 3px;
  outline: none;
  box-shadow: 
    inset 1px 1px 3px var(--shadow-dark),
    inset -1px -1px 0 var(--shadow-light);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--bg-surface);
  border-radius: var(--radius-circle);
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: 
    2px 2px 4px var(--shadow-dark),
    -1px -1px 0 var(--shadow-light);
}
.slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  background: var(--color-primary);
}

/* ============================================
   Badge & Tag Styles
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--bg-surface);
  color: var(--color-text-secondary);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 500;
  box-shadow: 
    2px 2px 4px var(--shadow-dark),
    -1px -1px 0 var(--shadow-light);
}

.badge-primary {
  color: var(--color-primary);
}

/* ============================================
   Divider
   ============================================ */
.divider {
  width: 100%;
  border: none;
  border-top: 1px solid var(--shadow-light);
  margin: var(--space-sm) 0;
  opacity: 0.5;
}

/* ============================================
   Icon System (SVG Mask-based)
   ============================================ */
.svg-icon {
  display: inline-block;
  background-color: var(--icon-color, var(--color-primary));
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Icon color variants */
.svg-icon.icon-primary { --icon-color: var(--color-primary); }
.svg-icon.icon-primary-light { --icon-color: var(--color-primary-light); }
.svg-icon.icon-accent { --icon-color: var(--color-accent); }
.svg-icon.icon-white { --icon-color: var(--color-white); }
.svg-icon.icon-danger { --icon-color: var(--color-danger); }
.svg-icon.icon-muted { --icon-color: var(--color-text-muted); }

/* Icon size variants */
.svg-icon.icon-xs { width: var(--icon-size-xs); height: var(--icon-size-xs); }
.svg-icon.icon-sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.svg-icon.icon-md { width: var(--icon-size-md); height: var(--icon-size-md); }
.svg-icon.icon-lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }
.svg-icon.icon-xl { width: var(--icon-size-xl); height: var(--icon-size-xl); }
.svg-icon.icon-xxl { width: var(--icon-size-xxl); height: var(--icon-size-xxl); }

/* ============================================
   Star/Favorite Button
   ============================================ */
.star-btn {
  background: var(--bg-surface);
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  border-radius: var(--radius-circle);
  box-shadow: 
    2px 2px 4px var(--shadow-dark),
    -1px -1px 0 var(--shadow-light);
  color: var(--star-off);
  transition: all var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
}
.star-btn:hover {
  transform: scale(1.05);
}
.star-btn:active {
  box-shadow: 
    inset 2px 2px 4px var(--shadow-dark),
    inset -1px -1px 0 var(--shadow-light);
  transform: scale(0.92);
}
.star-btn.active {
  color: var(--star-on);
  box-shadow: 
    inset 2px 2px 4px var(--shadow-dark),
    inset -1px -1px 0 var(--shadow-light);
  transform: scale(0.97);
}

/* ============================================
   Dock / Bottom Bar
   ============================================ */
.dock {
  position: fixed;
  bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-sm) var(--space-lg);
  background: var(--bg-surface);
  border-radius: var(--radius-3xl);
  box-shadow: 
    4px 4px 10px var(--shadow-dark),
    -2px -2px 0 var(--shadow-light);
  z-index: var(--z-dock);
}

.dock-item {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: all var(--transition-base);
  cursor: pointer;
  border-radius: var(--radius-circle);
}
.dock-item:hover {
  transform: scale(1.15) translateY(-4px);
  color: var(--color-primary);
}
.dock-item:active {
  transform: scale(0.95);
  box-shadow: 
    inset 2px 2px 4px var(--shadow-dark),
    inset -1px -1px 0 var(--shadow-light);
}

/* ============================================
   Time Block (for clock/time displays)
   ============================================ */
.time-block {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--bg-surface);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-3xl);
  font-size: var(--font-size-sm);
  box-shadow: 
    2px 2px 4px var(--shadow-dark),
    -1px -1px 0 var(--shadow-light);
}
.time-label {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.time-value {
  font-family: var(--font-family-mono);
  text-shadow: var(--text-shadow-deboss);
}

/* ============================================
   Utility Classes
   ============================================ */
.text-deboss {
  text-shadow: var(--text-shadow-deboss);
}

.text-emboss {
  text-shadow: 0 -1px 0 var(--shadow-dark);
}