@import "tailwindcss";

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  /* Hide scrollbar for Chrome, Safari and Opera */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  
  /* Line clamp utilities */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* Text shadows for buttons */
  .text-shadow-blue {
    text-shadow: -1px -1px 0px #284f7f, -1px 0px 0px #284f7f, -1px 1px 0px #284f7f,
                 0px -1px 0px #284f7f, 0px 1px 0px #284f7f,
                 1px -1px 0px #284f7f, 1px 0px 0px #284f7f, 1px 1px 0px #284f7f;
  }
  
  .text-shadow-green {
    text-shadow: -1px -1px 0px #2e6637, -1px 0px 0px #2e6637, -1px 1px 0px #2e6637,
                 0px -1px 0px #2e6637, 0px 1px 0px #2e6637,
                 1px -1px 0px #2e6637, 1px 0px 0px #2e6637, 1px 1px 0px #2e6637;
  }
  
  .text-shadow-red {
    text-shadow: -1px -1px 0px #86424f, -1px 0px 0px #86424f, -1px 1px 0px #86424f,
                 0px -1px 0px #86424f, 0px 1px 0px #86424f,
                 1px -1px 0px #86424f, 1px 0px 0px #86424f, 1px 1px 0px #86424f;
  }

  /* Lost Saga shadow utility */
  .shadow-ls {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 
                inset 0 -1px 0 rgba(0,0,0,0.1), 
                0 1px 2px rgba(0,0,0,0.15);
  }
}

@layer base {
  :root {
    /* Standard theme variables */
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    
    /* Lost Saga Theme Variables - Light Mode */
    --ls-body-bg: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/class/bg/body_bg.jpg) no-repeat center top;
    --ls-container-bg: #f4f4f4;
    --ls-card-bg: #f8f8f8;
    --ls-card-border: #d0d0d0;
    --ls-card-shadow: 0 2px 4px rgba(0,0,0,0.1);
    --ls-item-bg: #fff;
    --ls-item-footer: #f0f0f0;
    --ls-field-bg: #fafafa;
    --ls-field-border: #e0e0e0;
    --ls-text-primary: #333;
    --ls-text-extreme: #111;
    --ls-text-secondary: #666;
    --ls-menu-link: #555;
    --ls-menu-border: #d5d5d5;
    --ls-btn-border: #bbb;
    --ls-tab-bg: #f0f0f0;
    --ls-tab-border: #d0d0d0;
    --ls-tab-active-bg: #0c4372;
    --ls-rank-bg: #f8f8f8;
    --ls-rank-border: #e0e0e0;
  }
  
  .dark {
    /* Standard theme variables - Dark */
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    
    /* Lost Saga Dark Theme Variables */
    --ls-body-bg: linear-gradient(rgb(0 0 0 / 94%), rgb(1 0 0)), url(https://lostsagakr-cdn-image.valofe.com/2014_grand/class/bg/body_bg.jpg) no-repeat center top;
    --ls-container-bg: #2a2a2a;
    --ls-card-bg: #333;
    --ls-card-border: #444;
    --ls-card-shadow: 0 2px 4px rgba(0,0,0,0.3);
    --ls-item-bg: #2d2d2d;
    --ls-item-footer: #252525;
    --ls-field-bg: #3a3a3a;
    --ls-field-border: #555;
    --ls-text-primary: #e0e0e0;
    --ls-text-extreme: #fff;
    --ls-text-secondary: #aaa;
    --ls-menu-link: #ccc;
    --ls-menu-border: #555;
    --ls-btn-border: #666;
    --ls-tab-bg: #3a3a3a;
    --ls-tab-border: #555;
    --ls-tab-active-bg: #0c4372;
    --ls-rank-bg: #2d2d2d;
    --ls-rank-border: #444;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}