/* Light Clowder Themes */
  html.light-spark-kit {
    --background: 16 85% 96%;
    --foreground: 16 90% 12%;
    --card: 16 60% 98%;
    --card-foreground: 16 85% 15%;
    --popover: 16 70% 97%;
    --popover-foreground: 16 85% 15%;
    --primary: 16 100% 58%;
    --primary-foreground: 0 0% 100%;
    --secondary: 16 75% 88%;
    --secondary-foreground: 16 95% 18%;
    --muted: 16 50% 90%;
    --muted-foreground: 16 60% 28%;
    --accent: 16 95% 85%;
    --accent-foreground: 16 100% 20%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 16 55% 82%;
    --input: 16 60% 85%;
    --ring: 16 100% 62%;

    /* Clowder-specific colors */
    --clowder-primary: #FF6B35;
    --clowder-primary-rgb: 255 107 53;
    --clowder-secondary: #FF8E53;
    --clowder-secondary-rgb: 255 142 83;
  }

  /* Book UI helpers */
  .book-scope ::selection {
    background: rgb(var(--clowder-primary-rgb) / 0.25);
  }
  .theme-tint-border {
    border-color: color-mix(in srgb, rgb(var(--clowder-primary-rgb)) 50%, #fbbf24);
  }
  .theme-tint-fill {
    background-color: color-mix(in srgb, rgb(var(--clowder-primary-rgb)) 20%, #fef3c7);
  }
  html.light-tiny-bull {
    --background: 25 85% 96%;
    --foreground: 25 40% 15%;
    --card: 0 0% 100%;
    --card-foreground: 25 40% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 25 40% 15%;
    --primary: 25 60% 45%;
    --primary-foreground: 0 0% 100%;
    --secondary: 25 20% 92%;
    --secondary-foreground: 25 40% 15%;
    --muted: 25 15% 94%;
    --muted-foreground: 25 25% 35%;
    --accent: 25 20% 95%;
    --accent-foreground: 25 40% 15%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 25 15% 88%;
    --input: 25 15% 88%;
    --ring: 25 60% 45%;

    /* Clowder-specific colors */
    --clowder-primary: #8B4513;
    --clowder-primary-rgb: 139 69 19;
    --clowder-secondary: #A0522D;
    --clowder-secondary-rgb: 160 82 45;
  }

  html.light-quick-twins {
    --background: 248 85% 96%;
    --foreground: 248 45% 15%;
    --card: 0 0% 100%;
    --card-foreground: 248 45% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 248 45% 15%;
    --primary: 248 53% 58%;
    --primary-foreground: 0 0% 100%;
    --secondary: 248 25% 92%;
    --secondary-foreground: 248 45% 15%;
    --muted: 248 20% 94%;
    --muted-foreground: 248 30% 35%;
    --accent: 248 25% 95%;
    --accent-foreground: 248 45% 15%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 248 20% 88%;
    --input: 248 20% 88%;
    --ring: 248 53% 58%;

    /* Clowder-specific colors */
    --clowder-primary: #6A5ACD;
    --clowder-primary-rgb: 106 90 205;
    --clowder-secondary: #9370DB;
    --clowder-secondary-rgb: 147 112 219;
  }

  html.light-silver-shell {
    --background: 0 85% 96%;
    --foreground: 0 0% 15%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 15%;
    --primary: 0 0% 45%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 92%;
    --secondary-foreground: 0 0% 15%;
    --muted: 0 0% 94%;
    --muted-foreground: 0 0% 35%;
    --accent: 0 0% 95%;
    --accent-foreground: 0 0% 15%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 88%;
    --input: 0 0% 88%;
    --ring: 0 0% 45%;

    /* Clowder-specific colors */
    --clowder-primary: #C0C0C0;
    --clowder-primary-rgb: 192 192 192;
    --clowder-secondary: #DCDCDC;
    --clowder-secondary-rgb: 220 220 220;
  }

  html.light-tiny-lion {
    --background: 51 85% 96%;
    --foreground: 45 60% 15%;
    --card: 0 0% 100%;
    --card-foreground: 45 60% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 45 60% 15%;
    --primary: 51 100% 50%;
    --primary-foreground: 45 60% 15%;
    --secondary: 51 30% 92%;
    --secondary-foreground: 45 60% 15%;
    --muted: 51 25% 94%;
    --muted-foreground: 45 40% 35%;
    --accent: 51 30% 95%;
    --accent-foreground: 45 60% 15%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 51 25% 88%;
    --input: 51 25% 88%;
    --ring: 51 100% 50%;

    /* Clowder-specific colors */
    --clowder-primary: #FFD700;
    --clowder-primary-rgb: 255 215 0;
    --clowder-secondary: #FFA500;
    --clowder-secondary-rgb: 255 165 0;
  }

  html.light-golden-grain {
    --background: 43 85% 96%;
    --foreground: 43 55% 15%;
    --card: 0 0% 100%;
    --card-foreground: 43 55% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 43 55% 15%;
    --primary: 43 75% 49%;
    --primary-foreground: 0 0% 100%;
    --secondary: 43 25% 92%;
    --secondary-foreground: 43 55% 15%;
    --muted: 43 20% 94%;
    --muted-foreground: 43 35% 35%;
    --accent: 43 25% 95%;
    --accent-foreground: 43 55% 15%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 43 20% 88%;
    --input: 43 20% 88%;
    --ring: 43 75% 49%;

    /* Clowder-specific colors */
    --clowder-primary: #DAA520;
    --clowder-primary-rgb: 218 165 32;
    --clowder-secondary: #F0E68C;
    --clowder-secondary-rgb: 240 230 140;
  }

  html.light-gentle-hare {
    --background: 270 85% 96%;
    --foreground: 270 45% 15%;
    --card: 0 0% 100%;
    --card-foreground: 270 45% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 270 45% 15%;
    --primary: 270 43% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 270 25% 92%;
    --secondary-foreground: 270 45% 15%;
    --muted: 270 20% 94%;
    --muted-foreground: 270 30% 35%;
    --accent: 270 25% 95%;
    --accent-foreground: 270 45% 15%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 270 20% 88%;
    --input: 270 20% 88%;
    --ring: 270 43% 60%;

    /* Clowder-specific colors */
    --clowder-primary: #9370DB;
    --clowder-primary-rgb: 147 112 219;
    --clowder-secondary: #DDA0DD;
    --clowder-secondary-rgb: 221 160 221;
  }

  html.light-star-scales {
    --background: 0 85% 96%;
    --foreground: 0 60% 15%;
    --card: 0 0% 100%;
    --card-foreground: 0 60% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 60% 15%;
    --primary: 0 80% 45%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 25% 92%;
    --secondary-foreground: 0 60% 15%;
    --muted: 0 20% 94%;
    --muted-foreground: 0 40% 35%;
    --accent: 0 25% 95%;
    --accent-foreground: 0 60% 15%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 20% 88%;
    --input: 0 20% 88%;
    --ring: 0 80% 45%;

    /* Clowder-specific colors */
    --clowder-primary: #8B0000;
    --clowder-primary-rgb: 139 0 0;
    --clowder-secondary: #DC143C;
    --clowder-secondary-rgb: 220 20 60;
  }

  html.light-little-archer {
    --background: 120 85% 96%;
    --foreground: 120 60% 15%;
    --card: 0 0% 100%;
    --card-foreground: 120 60% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 120 60% 15%;
    --primary: 120 61% 45%;
    --primary-foreground: 0 0% 100%;
    --secondary: 120 25% 92%;
    --secondary-foreground: 120 60% 15%;
    --muted: 120 20% 94%;
    --muted-foreground: 120 40% 35%;
    --accent: 120 25% 95%;
    --accent-foreground: 120 60% 15%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 120 20% 88%;
    --input: 120 20% 88%;
    --ring: 120 61% 45%;

    /* Clowder-specific colors */
    --clowder-primary: #32CD32;
    --clowder-primary-rgb: 50 205 50;
    --clowder-secondary: #90EE90;
    --clowder-secondary-rgb: 144 238 144;
  }

  html.light-clockwork-kid {
    --background: 210 85% 96%;
    --foreground: 210 25% 15%;
    --card: 0 0% 100%;
    --card-foreground: 210 25% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 210 25% 15%;
    --primary: 210 30% 45%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 15% 92%;
    --secondary-foreground: 210 25% 15%;
    --muted: 210 12% 94%;
    --muted-foreground: 210 20% 35%;
    --accent: 210 15% 95%;
    --accent-foreground: 210 25% 15%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 210 12% 88%;
    --input: 210 12% 88%;
    --ring: 210 30% 45%;

    /* Clowder-specific colors */
    --clowder-primary: #708090;
    --clowder-primary-rgb: 112 128 144;
    --clowder-secondary: #B0C4DE;
    --clowder-secondary-rgb: 176 196 222;
  }

  html.light-star-whisper {
    --background: 225 85% 96%;
    --foreground: 225 60% 15%;
    --card: 0 0% 100%;
    --card-foreground: 225 60% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 225 60% 15%;
    --primary: 225 73% 57%;
    --primary-foreground: 0 0% 100%;
    --secondary: 225 30% 92%;
    --secondary-foreground: 225 60% 15%;
    --muted: 225 25% 94%;
    --muted-foreground: 225 40% 35%;
    --accent: 225 30% 95%;
    --accent-foreground: 225 60% 15%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 225 25% 88%;
    --input: 225 25% 88%;
    --ring: 225 73% 57%;

    /* Clowder-specific colors */
    --clowder-primary: #4169E1;
    --clowder-primary-rgb: 65 105 225;
    --clowder-secondary: #87CEEB;
    --clowder-secondary-rgb: 135 206 235;
  }

  html.light-dream-fish {
    --background: 177 85% 96%;
    --foreground: 177 60% 15%;
    --card: 0 0% 100%;
    --card-foreground: 177 60% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 177 60% 15%;
    --primary: 177 70% 41%;
    --primary-foreground: 0 0% 100%;
    --secondary: 177 25% 92%;
    --secondary-foreground: 177 60% 15%;
    --muted: 177 20% 94%;
    --muted-foreground: 177 40% 35%;
    --accent: 177 25% 95%;
    --accent-foreground: 177 60% 15%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 177 20% 88%;
    --input: 177 20% 88%;
    --ring: 177 70% 41%;

    /* Clowder-specific colors */
    --clowder-primary: #20B2AA;
    --clowder-primary-rgb: 32 178 170;
    --clowder-secondary: #48D1CC;
    --clowder-secondary-rgb: 72 209 204;
  }

  /* Dark Clowder Themes */
  html.dark-spark-kit {
    --background: 16 55% 22%;
    --foreground: 16 30% 98%;
    --card: 16 60% 26%;
    --card-foreground: 16 25% 98%;
    --popover: 16 65% 20%;
    --popover-foreground: 16 25% 98%;
    --primary: 16 100% 68%;
    --primary-foreground: 16 80% 12%;
    --secondary: 16 45% 32%;
    --secondary-foreground: 16 20% 98%;
    --muted: 16 35% 35%;
    --muted-foreground: 16 20% 85%;
    --accent: 16 70% 38%;
    --accent-foreground: 16 15% 98%;
    --destructive: 0 70% 55%;
    --destructive-foreground: 0 0% 100%;
    --border: 16 40% 40%;
    --input: 16 45% 38%;
    --ring: 16 100% 72%;

    /* Clowder-specific colors */
    --clowder-primary: #FF6B35;
    --clowder-primary-rgb: 255 107 53;
    --clowder-secondary: #FF8E53;
    --clowder-secondary-rgb: 255 142 83;
  }

  html.dark-tiny-bull {
    --background: 25 55% 22%;
    --foreground: 25 20% 92%;
    --card: 25 60% 26%;
    --card-foreground: 25 20% 92%;
    --popover: 25 65% 20%;
    --popover-foreground: 25 20% 92%;
    --primary: 25 65% 55%;
    --primary-foreground: 25 50% 10%;
    --secondary: 25 30% 22%;
    --secondary-foreground: 25 20% 92%;
    --muted: 25 25% 20%;
    --muted-foreground: 25 20% 62%;
    --accent: 25 35% 26%;
    --accent-foreground: 25 20% 92%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 25 25% 22%;
    --input: 25 25% 22%;
    --ring: 25 65% 55%;

    /* Clowder-specific colors */
    --clowder-primary: #8B4513;
    --clowder-primary-rgb: 139 69 19;
    --clowder-secondary: #A0522D;
    --clowder-secondary-rgb: 160 82 45;
  }

  html.dark-quick-twins {
    --background: 248 55% 22%;
    --foreground: 248 25% 94%;
    --card: 248 60% 26%;
    --card-foreground: 248 25% 94%;
    --popover: 248 65% 20%;
    --popover-foreground: 248 25% 94%;
    --primary: 248 53% 68%;
    --primary-foreground: 248 50% 12%;
    --secondary: 248 30% 20%;
    --secondary-foreground: 248 25% 94%;
    --muted: 248 25% 18%;
    --muted-foreground: 248 20% 65%;
    --accent: 248 35% 24%;
    --accent-foreground: 248 25% 94%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 248 25% 20%;
    --input: 248 25% 20%;
    --ring: 248 53% 68%;

    /* Clowder-specific colors */
    --clowder-primary: #6A5ACD;
    --clowder-primary-rgb: 106 90 205;
    --clowder-secondary: #9370DB;
    --clowder-secondary-rgb: 147 112 219;
  }

  html.dark-silver-shell {
    --background: 0 55% 22%;
    --foreground: 0 0% 94%;
    --card: 0 60% 26%;
    --card-foreground: 0 0% 94%;
    --popover: 0 65% 20%;
    --popover-foreground: 0 0% 94%;
    --primary: 0 0% 75%;
    --primary-foreground: 0 0% 12%;
    --secondary: 0 0% 22%;
    --secondary-foreground: 0 0% 94%;
    --muted: 0 0% 20%;
    --muted-foreground: 0 0% 65%;
    --accent: 0 0% 26%;
    --accent-foreground: 0 0% 94%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 22%;
    --input: 0 0% 22%;
    --ring: 0 0% 75%;

    /* Clowder-specific colors */
    --clowder-primary: #C0C0C0;
    --clowder-primary-rgb: 192 192 192;
    --clowder-secondary: #DCDCDC;
    --clowder-secondary-rgb: 220 220 220;
  }

  html.dark-tiny-lion {
    --background: 45 55% 22%;
    --foreground: 51 40% 94%;
    --card: 45 60% 26%;
    --card-foreground: 51 40% 94%;
    --popover: 45 65% 20%;
    --popover-foreground: 51 40% 94%;
    --primary: 51 100% 60%;
    --primary-foreground: 45 100% 12%;
    --secondary: 45 40% 22%;
    --secondary-foreground: 51 40% 94%;
    --muted: 45 35% 18%;
    --muted-foreground: 51 30% 65%;
    --accent: 45 50% 24%;
    --accent-foreground: 51 40% 94%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 45 35% 20%;
    --input: 45 35% 20%;
    --ring: 51 100% 60%;

    /* Clowder-specific colors */
    --clowder-primary: #FFD700;
    --clowder-primary-rgb: 255 215 0;
    --clowder-secondary: #FFA500;
    --clowder-secondary-rgb: 255 165 0;
  }

  html.dark-golden-grain {
    --background: 43 55% 22%;
    --foreground: 43 30% 93%;
    --card: 43 60% 26%;
    --card-foreground: 43 30% 93%;
    --popover: 43 65% 20%;
    --popover-foreground: 43 30% 93%;
    --primary: 43 75% 60%;
    --primary-foreground: 43 75% 15%;
    --secondary: 43 35% 22%;
    --secondary-foreground: 43 30% 93%;
    --muted: 43 30% 19%;
    --muted-foreground: 43 25% 64%;
    --accent: 43 40% 25%;
    --accent-foreground: 43 30% 93%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 43 30% 21%;
    --input: 43 30% 21%;
    --ring: 43 75% 60%;

    /* Clowder-specific colors */
    --clowder-primary: #DAA520;
    --clowder-primary-rgb: 218 165 32;
    --clowder-secondary: #F0E68C;
    --clowder-secondary-rgb: 240 230 140;
  }

  html.dark-gentle-hare {
    --background: 270 55% 22%;
    --foreground: 270 25% 93%;
    --card: 270 60% 26%;
    --card-foreground: 270 25% 93%;
    --popover: 270 65% 20%;
    --popover-foreground: 270 25% 93%;
    --primary: 270 43% 72%;
    --primary-foreground: 270 50% 14%;
    --secondary: 270 30% 21%;
    --secondary-foreground: 270 25% 93%;
    --muted: 270 25% 19%;
    --muted-foreground: 270 20% 64%;
    --accent: 270 35% 24%;
    --accent-foreground: 270 25% 93%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 270 25% 21%;
    --input: 270 25% 21%;
    --ring: 270 43% 72%;

    /* Clowder-specific colors */
    --clowder-primary: #9370DB;
    --clowder-primary-rgb: 147 112 219;
    --clowder-secondary: #DDA0DD;
    --clowder-secondary-rgb: 221 160 221;
  }

  html.dark-star-scales {
    --background: 0 55% 22%;
    --foreground: 0 30% 94%;
    --card: 0 60% 26%;
    --card-foreground: 0 30% 94%;
    --popover: 0 65% 20%;
    --popover-foreground: 0 30% 94%;
    --primary: 348 83% 57%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 40% 22%;
    --secondary-foreground: 0 30% 94%;
    --muted: 0 35% 18%;
    --muted-foreground: 0 25% 65%;
    --accent: 0 50% 24%;
    --accent-foreground: 0 30% 94%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 35% 20%;
    --input: 0 35% 20%;
    --ring: 348 83% 57%;

    /* Clowder-specific colors */
    --clowder-primary: #8B0000;
    --clowder-primary-rgb: 139 0 0;
    --clowder-secondary: #DC143C;
    --clowder-secondary-rgb: 220 20 60;
  }

  html.dark-little-archer {
    --background: 120 55% 22%;
    --foreground: 120 35% 94%;
    --card: 120 60% 26%;
    --card-foreground: 120 35% 94%;
    --popover: 120 65% 20%;
    --popover-foreground: 120 35% 94%;
    --primary: 120 61% 60%;
    --primary-foreground: 120 100% 12%;
    --secondary: 120 35% 21%;
    --secondary-foreground: 120 35% 94%;
    --muted: 120 30% 18%;
    --muted-foreground: 120 25% 65%;
    --accent: 120 40% 24%;
    --accent-foreground: 120 35% 94%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 120 30% 20%;
    --input: 120 30% 20%;
    --ring: 120 61% 60%;

    /* Clowder-specific colors */
    --clowder-primary: #32CD32;
    --clowder-primary-rgb: 50 205 50;
    --clowder-secondary: #90EE90;
    --clowder-secondary-rgb: 144 238 144;
  }

  html.dark-clockwork-kid {
    --background: 210 55% 22%;
    --foreground: 210 12% 93%;
    --card: 210 60% 26%;
    --card-foreground: 210 12% 93%;
    --popover: 210 65% 20%;
    --popover-foreground: 210 12% 93%;
    --primary: 214 41% 70%;
    --primary-foreground: 210 22% 12%;
    --secondary: 210 14% 22%;
    --secondary-foreground: 210 12% 93%;
    --muted: 210 12% 19%;
    --muted-foreground: 210 10% 64%;
    --accent: 210 16% 24%;
    --accent-foreground: 210 12% 93%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 210 12% 21%;
    --input: 210 12% 21%;
    --ring: 214 41% 70%;

    /* Clowder-specific colors */
    --clowder-primary: #708090;
    --clowder-primary-rgb: 112 128 144;
    --clowder-secondary: #B0C4DE;
    --clowder-secondary-rgb: 176 196 222;
  }

  html.dark-star-whisper {
    --background: 225 55% 22%;
    --foreground: 225 40% 94%;
    --card: 225 60% 26%;
    --card-foreground: 225 40% 94%;
    --popover: 225 65% 20%;
    --popover-foreground: 225 40% 94%;
    --primary: 225 73% 67%;
    --primary-foreground: 225 88% 12%;
    --secondary: 225 40% 22%;
    --secondary-foreground: 225 40% 94%;
    --muted: 225 35% 19%;
    --muted-foreground: 225 30% 65%;
    --accent: 225 45% 25%;
    --accent-foreground: 225 40% 94%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 225 35% 21%;
    --input: 225 35% 21%;
    --ring: 225 73% 67%;

    /* Clowder-specific colors */
    --clowder-primary: #4169E1;
    --clowder-primary-rgb: 65 105 225;
    --clowder-secondary: #87CEEB;
    --clowder-secondary-rgb: 135 206 235;
  }

  html.dark-dream-fish {
    --background: 177 55% 22%;
    --foreground: 177 35% 94%;
    --card: 177 60% 26%;
    --card-foreground: 177 35% 94%;
    --popover: 177 65% 20%;
    --popover-foreground: 177 35% 94%;
    --primary: 177 70% 51%;
    --primary-foreground: 177 100% 12%;
    --secondary: 177 35% 21%;
    --secondary-foreground: 177 35% 94%;
    --muted: 177 30% 19%;
    --muted-foreground: 177 25% 65%;
    --accent: 177 40% 24%;
    --accent-foreground: 177 35% 94%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 177 30% 21%;
    --input: 177 30% 21%;
    --ring: 177 70% 51%;

    /* Clowder-specific colors */
    --clowder-primary: #20B2AA;
    --clowder-primary-rgb: 32 178 170;
    --clowder-secondary: #48D1CC;
    --clowder-secondary-rgb: 72 209 204;
  }

  


}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
  
  /* Viewport and safe area handling */
  html {
    height: 100vh;
    height: 100svh; /* Use small viewport height on mobile */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    max-width: 100vw;
  }
  
  body {
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    max-width: 100vw;
    /* Ensure body respects safe areas */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Mobile overflow prevention */
* {
  box-sizing: border-box;
}

*:before,
*:after {
  box-sizing: border-box;
}

/* Prevent horizontal scrolling on all elements */
*,
*:before,
*:after {
  max-width: 100%;
}

/* Night Paws custom styles */
@layer components {
  .cat-card {
    @apply bg-card border border-border rounded-lg p-4 shadow-lg hover:shadow-xl transition-shadow;
    /* Prevent card overflow on mobile */
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .game-button {
    @apply bg-primary text-primary-foreground hover:bg-primary/90 px-4 py-2 rounded-md font-medium transition-colors;
  }
  
  .stat-bar {
    @apply bg-secondary rounded-full h-2 overflow-hidden;
  }
  
  .stat-fill {
    @apply h-full bg-primary transition-all duration-300 ease-out;
  }
  
  .moonlight-glow {
    @apply shadow-[0_0_20px_rgba(232,244,248,0.3)];
  }
  
  .cat-animation {
    @apply transition-transform duration-300 hover:scale-105;
  }
  
  /* Mobile-specific improvements */
  .mobile-safe {
    overflow-x: hidden;
    max-width: 100vw;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Hero animations */
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
    opacity: 0;
  }
}