@tailwind base;
@tailwind components;
@tailwind utilities;

/* Record, Reflect, Recover - Global Styles */

@layer base {
  /* 
    Light & Dark Theme Color Variables 
    These variables are referenced by tailwind.config.js to create a themeable UI.
  */
  :root {
    /* Primary (Blue) */
    --color-primary-0: 240 249 255; /* #F0F9FF */
    --color-primary-50: 224 242 254; /* #E0F2FE */
    --color-primary-100: 186 230 253; /* #BAE6FD */
    --color-primary-200: 125 211 252; /* #7DD3FC */
    --color-primary-300: 59 182 246; /* #3BB6F6 */
    --color-primary-400: 14 159 239; /* #0EA5E9 */
    --color-primary-500: 3 120 166; /* #0378A6 */
    --color-primary-600: 2 103 147; /* #026793 */
    --color-primary-700: 3 83 118; /* #035376 */
    --color-primary-800: 3 67 95; /* #03435F */
    --color-primary-900: 4 56 78; /* #04384E */
    --color-primary-950: 2 34 48; /* #022230 */

    /* Secondary (Olive Green) */
    --color-secondary-0: 251 252 249; /* #FBFCF9 */
    --color-secondary-50: 245 247 241; /* #F5F7F1 */
    --color-secondary-100: 232 237 222; /* #E8EDDE */
    --color-secondary-200: 211 219 193; /* #D3DBC1 */
    --color-secondary-300: 183 196 156; /* #B7C49C */
    --color-secondary-400: 153 170 119; /* #99AA77 */
    --color-secondary-500: 124 142 64; /* #7C8E40 */
    --color-secondary-600: 104 118 56; /* #687638 */
    --color-secondary-700: 84 94 48; /* #545E30 */
    --color-secondary-800: 67 75 41; /* #434B29 */
    --color-secondary-900: 55 61 36; /* #373D24 */
    --color-secondary-950: 32 36 21; /* #202415 */

    /* Tertiary (Purple) */
    --color-tertiary-50: 245 241 247; /* #F5F1F7 */
    --color-tertiary-100: 232 222 237; /* #E8DEED */
    --color-tertiary-200: 211 193 219; /* #D3C1DB */
    --color-tertiary-300: 183 156 196; /* #B79CC4 */
    --color-tertiary-400: 153 119 170; /* #9977AA */
    --color-tertiary-500: 120 73 140; /* #78498C */
    --color-tertiary-600: 101 62 118; /* #653E76 */
    --color-tertiary-700: 81 50 94; /* #51325E */
    --color-tertiary-800: 65 41 75; /* #41294B */
    --color-tertiary-900: 53 35 62; /* #35233E */
    --color-tertiary-950: 31 20 36; /* #1F1424 */

    /* Success (Green) */
    --color-success-0: 250 251 247; /* #FAFBFC */
    --color-success-50: 241 243 235; /* #F1F3EB */
    --color-success-100: 224 229 210; /* #E0E5D2 */
    --color-success-200: 196 205 171; /* #C4CDAB */
    --color-success-300: 167 178 132; /* #A7B284 */
    --color-success-400: 145 165 74; /* #91A54A */
    --color-success-500: 119 133 60; /* #77853C */
    --color-success-600: 97 108 49; /* #616C31 */
    --color-success-700: 77 86 40; /* #4D5628 */
    --color-success-800: 61 68 34; /* #3D4422 */
    --color-success-900: 50 56 29; /* #32381D */
    --color-success-950: 29 32 17; /* #1D2011 */

    /* Error (Reddish Brown) */
    --color-error-0: 252 249 249; /* #FCF9F9 */
    --color-error-50: 247 241 240; /* #F7F1F0 */
    --color-error-100: 237 222 221; /* #EDDEDD */
    --color-error-200: 219 193 192; /* #DBC1C0 */
    --color-error-300: 196 156 154; /* #C49C9A */
    --color-error-400: 170 119 116; /* #AA7774 */
    --color-error-500: 154 76 69; /* #9A4C45 */
    --color-error-600: 126 63 57; /* #7E3F39 */
    --color-error-700: 101 51 46; /* #65332E */
    --color-error-800: 80 41 38; /* #502926 */
    --color-error-900: 65 34 31; /* #41221F */
    --color-error-950: 38 20 18; /* #261412 */

    /* Warning (Orange) */
    --color-warning-0: 255 251 245; /* #FFFAF5 */
    --color-warning-50: 255 244 230; /* #FFF4E6 */
    --color-warning-100: 255 226 194; /* #FFE2C2 */
    --color-warning-200: 255 204 153; /* #FFCC99 */
    --color-warning-300: 255 170 85; /* #FFAA55 */
    --color-warning-400: 230 128 38; /* #E68026 */
    --color-warning-500: 204 102 0; /* #CC6600 */
    --color-warning-600: 163 82 0; /* #A35200 */
    --color-warning-700: 128 64 0; /* #804000 */
    --color-warning-800: 102 51 0; /* #663300 */
    --color-warning-900: 82 41 0; /* #522900 */
    --color-warning-950: 46 23 0; /* #2E1700 */

    /* Info (Gold) */
    --color-info-0: 252 250 246; /* #FCFAF6 */
    --color-info-50: 249 244 233; /* #F9F4E9 */
    --color-info-100: 240 230 210; /* #F0E6D2 */
    --color-info-200: 227 209 173; /* #E3D1AD */
    --color-info-300: 209 181 130; /* #D1B582 */
    --color-info-400: 195 159 87; /* #C39F57 */
    --color-info-500: 186 142 35; /* #BA8E23 */
    --color-info-600: 153 117 29; /* #99751D */
    --color-info-700: 120 92 23; /* #785C17 */
    --color-info-800: 94 72 18; /* #5E4812 */
    --color-info-900: 77 59 15; /* #4D3B0F */
    --color-info-950: 44 34 9; /* #2C2209 */

    /* Typography */
    --color-typography-0: 250 250 250; /* #FAFAFA */
    --color-typography-50: 245 245 245; /* #F5F5F5 */
    --color-typography-100: 229 229 229; /* #E5E5E5 */
    --color-typography-200: 212 212 212; /* #D4D4D4 */
    --color-typography-300: 163 163 163; /* #A3A3A3 */
    --color-typography-400: 115 115 115; /* #737373 */
    --color-typography-500: 82 82 82; /* #525252 */
    --color-typography-600: 64 64 64; /* #404040 */
    --color-typography-700: 48 48 48; /* #303030 */
    --color-typography-800: 38 38 38; /* #262626 */
    --color-typography-900: 23 23 23; /* #171717 */
    --color-typography-950: 9 9 9; /* #090909 */
    --color-typography-white: 255 255 255; /* #FFFFFF */
    --color-typography-gray: 212 212 212; /* #D4D4D4 */
    --color-typography-black: 24 23 24; /* #181718 */
    
    /* Background */
    --color-background-0: 255 255 255; /* #FFFFFF */
    --color-background-50: 250 250 250; /* #FAFAFA */
    --color-background-100: 245 245 245; /* #F5F5F5 */
    --color-background-200: 229 229 229; /* #E5E5E5 */
    --color-background-300: 212 212 212; /* #D4D4D4 */
    --color-background-400: 163 163 163; /* #A3A3A3 */
    --color-background-500: 115 115 115; /* #737373 */
    --color-background-600: 82 82 82; /* #525252 */
    --color-background-700: 64 64 64; /* #404040 */
    --color-background-800: 38 38 38; /* #262626 */
    --color-background-900: 23 23 23; /* #171717 */
    --color-background-950: 9 9 9; /* #090909 */
    --color-background-error: 254 226 226; /* #FEE2E2 */
    --color-background-warning: 254 243 199; /* #FEF3C7 */
    --color-background-muted: 245 245 245; /* #F5F5F5 */
    --color-background-success: 220 252 231; /* #DCFCE7 */
    --color-background-info: 219 234 254; /* #DBEAFE */
    --color-background-light: 247 250 252; /* #F7FAFC */
    --color-background-dark: 24 23 25; /* #181719 */

    /* Border */
    --color-border-0: 255 255 255; /* #FFFFFF */
    --color-border-50: 250 250 250; /* #FAFAFA */
    --color-border-100: 245 245 245; /* #F5F5F5 */
    --color-border-200: 229 229 229; /* #E5E5E5 */
    --color-border-300: 212 212 212; /* #D4D4D4 */
    --color-border-400: 163 163 163; /* #A3A3A3 */
    --color-border-500: 115 115 115; /* #737373 */
    --color-border-600: 82 82 82; /* #525252 */
    --color-border-700: 64 64 64; /* #404040 */
    --color-border-800: 38 38 38; /* #262626 */
    --color-border-900: 23 23 23; /* #171717 */
    --color-border-950: 9 9 9; /* #090909 */

    /* Outline */
    --color-outline-0: 255 255 255; /* #FFFFFF */
    --color-outline-50: 250 250 250; /* #FAFAFA */
    --color-outline-100: 245 245 245; /* #F5F5F5 */
    --color-outline-200: 229 229 229; /* #E5E5E5 */
    --color-outline-300: 212 212 212; /* #D4D4D4 */
    --color-outline-400: 163 163 163; /* #A3A3A3 */
    --color-outline-500: 115 115 115; /* #737373 */
    --color-outline-600: 82 82 82; /* #525252 */
    --color-outline-700: 64 64 64; /* #404040 */
    --color-outline-800: 38 38 38; /* #262626 */
    --color-outline-900: 23 23 23; /* #171717 */
    --color-outline-950: 9 9 9; /* #090909 */
    
    /* Indicator */
    --color-indicator-primary: 3 120 166; /* #0378A6 */
    --color-indicator-info: 186 142 35; /* #BA8E23 */
    --color-indicator-error: 154 76 69; /* #9A4C45 */
    
    /* Meditation-focused theming */
    --meditation-border-radius: 12px;
    --meditation-border-radius-lg: 20px;
    --meditation-spacing-xs: 4px;
    --meditation-spacing-sm: 8px;
    --meditation-spacing-md: 16px;
    --meditation-spacing-lg: 24px;
    --meditation-spacing-xl: 32px;
    
    /* Smooth transitions */
    --meditation-transition-fast: 0.15s ease-out;
    --meditation-transition-medium: 0.3s ease-out;
    --meditation-transition-slow: 0.6s ease-out;
  }

  .dark {
    /* Primary (Blue) */
    --color-primary-0: 2 34 48; /* #022230 */
    --color-primary-50: 4 56 78; /* #04384E */
    --color-primary-100: 3 67 95; /* #03435F */
    --color-primary-200: 3 83 118; /* #035376 */
    --color-primary-300: 2 103 147; /* #026793 */
    --color-primary-400: 3 120 166; /* #0378A6 */
    --color-primary-500: 14 159 239; /* #0EA5E9 */
    --color-primary-600: 59 182 246; /* #3BB6F6 */
    --color-primary-700: 125 211 252; /* #7DD3FC */
    --color-primary-800: 186 230 253; /* #BAE6FD */
    --color-primary-900: 224 242 254; /* #E0F2FE */
    --color-primary-950: 240 249 255; /* #F0F9FF */

    /* Secondary (Olive Green) */
    --color-secondary-0: 32 36 21; /* #202415 */
    --color-secondary-50: 55 61 36; /* #373D24 */
    --color-secondary-100: 67 75 41; /* #434B29 */
    --color-secondary-200: 84 94 48; /* #545E30 */
    --color-secondary-300: 104 118 56; /* #687638 */
    --color-secondary-400: 124 142 64; /* #7C8E40 */
    --color-secondary-500: 153 170 119; /* #99AA77 */
    --color-secondary-600: 183 196 156; /* #B7C49C */
    --color-secondary-700: 211 219 193; /* #D3DBC1 */
    --color-secondary-800: 232 237 222; /* #E8EDDE */
    --color-secondary-900: 245 247 241; /* #F5F7F1 */
    --color-secondary-950: 251 252 249; /* #FBFCF9 */

    /* Tertiary (Purple) */
    --color-tertiary-50: 31 20 36; /* #1F1424 */
    --color-tertiary-100: 53 35 62; /* #35233E */
    --color-tertiary-200: 65 41 75; /* #41294B */
    --color-tertiary-300: 81 50 94; /* #51325E */
    --color-tertiary-400: 101 62 118; /* #653E76 */
    --color-tertiary-500: 120 73 140; /* #78498C */
    --color-tertiary-600: 153 119 170; /* #9977AA */
    --color-tertiary-700: 183 156 196; /* #B79CC4 */
    --color-tertiary-800: 211 193 219; /* #D3C1DB */
    --color-tertiary-900: 232 222 237; /* #E8DEED */
    --color-tertiary-950: 245 241 247; /* #F5F1F7 */
    
    /* Success (Green) */
    --color-success-0: 29 32 17; /* #1D2011 */
    --color-success-50: 50 56 29; /* #32381D */
    --color-success-100: 61 68 34; /* #3D4422 */
    --color-success-200: 77 86 40; /* #4D5628 */
    --color-success-300: 97 108 49; /* #616C31 */
    --color-success-400: 119 133 60; /* #77853C */
    --color-success-500: 145 165 74; /* #91A54A */
    --color-success-600: 167 178 132; /* #A7B284 */
    --color-success-700: 196 205 171; /* #C4CDAB */
    --color-success-800: 224 229 210; /* #E0E5D2 */
    --color-success-900: 241 243 235; /* #F1F3EB */
    --color-success-950: 250 251 247; /* #FAFBFC */
    
    /* Error (Reddish Brown) */
    --color-error-0: 38 20 18; /* #261412 */
    --color-error-50: 65 34 31; /* #41221F */
    --color-error-100: 80 41 38; /* #502926 */
    --color-error-200: 101 51 46; /* #65332E */
    --color-error-300: 126 63 57; /* #7E3F39 */
    --color-error-400: 154 76 69; /* #9A4C45 */
    --color-error-500: 170 119 116; /* #AA7774 */
    --color-error-600: 196 156 154; /* #C49C9A */
    --color-error-700: 219 193 192; /* #DBC1C0 */
    --color-error-800: 237 222 221; /* #EDDEDD */
    --color-error-900: 247 241 240; /* #F7F1F0 */
    --color-error-950: 252 249 249; /* #FCF9F9 */
    
    /* Warning (Orange) */
    --color-warning-0: 46 23 0; /* #2E1700 */
    --color-warning-50: 82 41 0; /* #522900 */
    --color-warning-100: 102 51 0; /* #663300 */
    --color-warning-200: 128 64 0; /* #804000 */
    --color-warning-300: 163 82 0; /* #A35200 */
    --color-warning-400: 204 102 0; /* #CC6600 */
    --color-warning-500: 230 128 38; /* #E68026 */
    --color-warning-600: 255 170 85; /* #FFAA55 */
    --color-warning-700: 255 204 153; /* #FFCC99 */
    --color-warning-800: 255 226 194; /* #FFE2C2 */
    --color-warning-900: 255 244 230; /* #FFF4E6 */
    --color-warning-950: 255 251 245; /* #FFFAF5 */
    
    /* Info (Gold) */
    --color-info-0: 44 34 9; /* #2C2209 */
    --color-info-50: 77 59 15; /* #4D3B0F */
    --color-info-100: 94 72 18; /* #5E4812 */
    --color-info-200: 120 92 23; /* #785C17 */
    --color-info-300: 153 117 29; /* #99751D */
    --color-info-400: 186 142 35; /* #BA8E23 */
    --color-info-500: 195 159 87; /* #C39F57 */
    --color-info-600: 209 181 130; /* #D1B582 */
    --color-info-700: 227 209 173; /* #E3D1AD */
    --color-info-800: 240 230 210; /* #F0E6D2 */
    --color-info-900: 249 244 233; /* #F9F4E9 */
    --color-info-950: 252 250 246; /* #FCFAF6 */
    
    /* Typography */
    --color-typography-0: 9 9 9; /* #090909 */
    --color-typography-50: 23 23 23; /* #171717 */
    --color-typography-100: 38 38 38; /* #262626 */
    --color-typography-200: 48 48 48; /* #303030 */
    --color-typography-300: 64 64 64; /* #404040 */
    --color-typography-400: 82 82 82; /* #525252 */
    --color-typography-500: 115 115 115; /* #737373 */
    --color-typography-600: 163 163 163; /* #A3A3A3 */
    --color-typography-700: 212 212 212; /* #D4D4D4 */
    --color-typography-800: 229 229 229; /* #E5E5E5 */
    --color-typography-900: 245 245 245; /* #F5F5F5 */
    --color-typography-950: 250 250 250; /* #FAFAFA */
    --color-typography-white: 24 23 24; /* #181718 */
    --color-typography-gray: 115 115 115; /* #737373 */
    --color-typography-black: 255 255 255; /* #FFFFFF */
    
    /* Background */
    --color-background-0: 24 23 25; /* #181719 */
    --color-background-50: 38 38 38; /* #262626 */
    --color-background-100: 48 48 48; /* #303030 */
    --color-background-200: 64 64 64; /* #404040 */
    --color-background-300: 82 82 82; /* #525252 */
    --color-background-400: 115 115 115; /* #737373 */
    --color-background-500: 163 163 163; /* #A3A3A3 */
    --color-background-600: 212 212 212; /* #D4D4D4 */
    --color-background-700: 229 229 229; /* #E5E5E5 */
    --color-background-800: 245 245 245; /* #F5F5F5 */
    --color-background-900: 250 250 250; /* #FAFAFA */
    --color-background-950: 255 255 255; /* #FFFFFF */
    --color-background-error: 153 27 27; /* #991B1B */
    --color-background-warning: 180 83 9; /* #B45309 */
    --color-background-muted: 64 64 64; /* #404040 */
    --color-background-success: 22 101 52; /* #166534 */
    --color-background-info: 30 64 175; /* #1E40AF */
    --color-background-light: 24 23 25; /* #181719 */
    --color-background-dark: 247 250 252; /* #F7FAFC */

    /* Border */
    --color-border-0: 9 9 9; /* #090909 */
    --color-border-50: 23 23 23; /* #171717 */
    --color-border-100: 38 38 38; /* #262626 */
    --color-border-200: 64 64 64; /* #404040 */
    --color-border-300: 82 82 82; /* #525252 */
    --color-border-400: 115 115 115; /* #737373 */
    --color-border-500: 163 163 163; /* #A3A3A3 */
    --color-border-600: 212 212 212; /* #D4D4D4 */
    --color-border-700: 229 229 229; /* #E5E5E5 */
    --color-border-800: 245 245 245; /* #F5F5F5 */
    --color-border-900: 250 250 250; /* #FAFAFA */
    --color-border-950: 255 255 255; /* #FFFFFF */
    
    /* Outline */
    --color-outline-0: 9 9 9; /* #090909 */
    --color-outline-50: 23 23 23; /* #171717 */
    --color-outline-100: 38 38 38; /* #262626 */
    --color-outline-200: 64 64 64; /* #404040 */
    --color-outline-300: 82 82 82; /* #525252 */
    --color-outline-400: 115 115 115; /* #737373 */
    --color-outline-500: 163 163 163; /* #A3A3A3 */
    --color-outline-600: 212 212 212; /* #D4D4D4 */
    --color-outline-700: 229 229 229; /* #E5E5E5 */
    --color-outline-800: 245 245 245; /* #F5F5F5 */
    --color-outline-900: 250 250 250; /* #FAFAFA */
    --color-outline-950: 255 255 255; /* #FFFFFF */
    
    /* Indicator */
    --color-indicator-primary: 14 159 239; /* #0EA5E9 */
    --color-indicator-info: 195 159 87; /* #C39F57 */
    --color-indicator-error: 170 119 116; /* #AA7774 */
  }

  /* Body and HTML reset for meditation experience */
  html,
  body {
    background-color: rgb(var(--color-background-light));
    color: rgb(var(--color-typography-700));
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
      sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Enhanced text selection for better UX */
  ::selection {
    background-color: rgba(60, 180, 246, 0.2);
    color: inherit;
  }

  /* Scrollbar styling for better aesthetics */
  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}

/* Component styles for meditation theme */
@layer components {
  /* Meditation button styles */
  .meditation-button-primary {
    @apply bg-brand-primary text-white font-medium py-3 px-6 rounded-xl;
    box-shadow: var(--meditation-transition-fast);
    transition: all var(--meditation-transition-fast);
    border: none;
  }

  .meditation-button-primary:hover {
    @apply bg-blue-600;
    box-shadow: var(--meditation-transition-medium);
  }

  .meditation-button-primary:active {
    @apply bg-blue-700;
    box-shadow: var(--meditation-transition-fast);
  }

  /* Meditation button secondary (green) styles */
  .meditation-button-secondary {
    @apply bg-brand-green text-white font-medium py-3 px-6 rounded-xl;
    box-shadow: var(--meditation-transition-fast);
    transition: all var(--meditation-transition-fast);
    border: none;
  }

  .meditation-button-secondary:hover {
    @apply bg-green-600;
    box-shadow: var(--meditation-transition-medium);
  }

  .meditation-button-secondary:active {
    @apply bg-green-700;
    box-shadow: var(--meditation-transition-fast);
  }

  /* Meditation button disabled styles */
  .meditation-button-disabled {
    @apply bg-gray-400 text-gray-200 font-medium py-3 px-6 rounded-xl;
    box-shadow: none;
    transition: all var(--meditation-transition-fast);
    border: none;
    opacity: 0.6;
  }

  /* Meditation text input styles */
  .meditation-input {
    @apply bg-background-50 border border-outline-300 rounded-xl p-4 text-typography-900;
    transition: all var(--meditation-transition-fast);
    font-family: 'Roboto', sans-serif;
  }

  .meditation-input:focus {
    @apply border-primary-400 bg-background-0;
    /*box-shadow: 0 0 0 3px rgba(60, 180, 246, 0.1);*/
    outline: none;
  }

  /* Meditation modal overlay */
  .meditation-modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50;
    backdrop-filter: blur(8px);
    transition: all var(--meditation-transition-medium);
  }

  /* Meditation content container */
  .meditation-container {
    @apply max-w-lg mx-auto px-6 py-8;
  }

  /* Smooth focus ring for accessibility */
  .meditation-focus-ring:focus {
    outline: 2px solid rgba(60, 180, 246, 0.6);
    outline-offset: 2px;
    border-radius: var(--meditation-border-radius);
  }

  /* Meditation list item */
  .meditation-list-item {
    @apply flex items-center justify-between p-4 border-b border-outline-100;
    transition: background-color var(--meditation-transition-fast);
  }

  .meditation-list-item:hover {
    @apply bg-background-50;
  }

  /* Meditation badge */
  .meditation-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
    /*background: rgba(60, 180, 246, 0.1); */
    color: rgb(60, 180, 246);
  }
}

/* Utility classes for meditation theme */
@layer utilities {
  /* Animation utilities */
  .animate-fade-in {
    animation: fadeIn var(--meditation-transition-medium) ease-out;
  }

  .animate-slide-up {
    animation: slideUp var(--meditation-transition-medium) ease-out;
  }

  .animate-scale-in {
    animation: scaleIn var(--meditation-transition-fast) ease-out;
  }

  /* Custom keyframes */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* Glassmorphism effect for meditation UI */
  .glass-effect {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Gradient text for headings */
  .gradient-text {
    background: linear-gradient(135deg, rgb(60, 180, 246), rgb(109, 199, 248));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0;
  }

  /* Smooth hover transform */
  .hover-lift:hover {
    transform: translateY(-4px);
    transition: transform var(--meditation-transition-medium);
  }

  /* Safe area adjustments for mobile */
  .safe-top {
    padding-top: env(safe-area-inset-top);
  }

  .safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Print styles for accessibility */
@media print {
  .no-print {
    display: none !important;
  }
  
  .meditation-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
}