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

@layer base {
  .font-outline {
    text-shadow:
   -2px -2px 0 oklch(25.8% 0.092 26.042),  
    2px -2px 0 oklch(25.8% 0.092 26.042),
    -2px 2px 0 oklch(25.8% 0.092 26.042),
     2px 2px 0 oklch(25.8% 0.092 26.042);
  }

  .polkadot-bg-lg {
    background-image: 
    radial-gradient(circle, rgba(255,255,255,0.3) 30%, transparent 20%),
    radial-gradient(circle, rgba(255,255,255,0.3) 30%, transparent 20%);
    background-size: 65px 65px;
    background-position: 0 0, 32.5px 32.5px;  /* Second layer offset by half */
  }

  .polkadot-bg-sm {
    background-image: 
    radial-gradient(circle, rgba(255,255,255,0.3) 20%, transparent 20%),
    radial-gradient(circle, rgba(255,255,255,0.3) 20%, transparent 20%);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;  /* Second layer offset by half */
  }

}

/* Custom font */
body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    zoom: 0.8;
}

.font-outfit {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Legend card - spans 3x2 grid cells */
.legend-card {
    grid-column: span 2;
    grid-row: span 3;
}

/* Type colors as CSS variables for Tailwind */
.type-meal {
    background-color: #ff9a56;
}

.type-snack {
    background-color: #ff69b4;
}

.type-accessories {
    background-color: #9370db;
}

.type-clothes {
    background-color: #4169e1;
}

.type-item {
    background-color: #87ceeb;
}

.type-special {
    background-color: #20b2aa;
}

.type-room {
    background-color: #90ee90;
}

/* Card text overflow handling */
.card-name-en {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}