/* --------------------------
   CORE TAILWIND UTILITIES
---------------------------*/

/* Layout */
.flex { display:flex; }
.grid { display:grid; }
.grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.gap-4 { gap:1rem; }
.gap-6 { gap:1.5rem; }
.mx-auto { margin-left:auto; margin-right:auto; }
.mt-10 { margin-top:2.5rem; }
.mb-3 { margin-bottom:0.75rem; }
.mb-4 { margin-bottom:1rem; }
.mb-5 { margin-bottom:1.25rem; }
.mb-6 { margin-bottom:1.5rem; }
.gap-4 { gap:1rem; }
.p-8 { padding:2rem; }
.p-4 { padding:1rem; }
.p-3 { padding:0.75rem; }

/* Typography */
.text-center { text-align:center; }
.text-lg { font-size:1.125rem; }
.text-xl { font-size:1.25rem; }
.text-2xl { font-size:1.5rem; }
.text-3xl { font-size:1.875rem; }
.text-4xl { font-size:2.25rem; }
.font-bold { font-weight:700; }
.font-extrabold { font-weight:800; }

/* Colors */
.text-white { color:#ffffff; }
.text-black { color:#000; }
.text-sleep-yellow { color:#f7d354; }
.text-sleep-light { color:#bcd0e6; }
.bg-sleep-dark { background:#071a30; }

/* Rounded */
.rounded-xl { border-radius:0.75rem; }
.rounded-3xl { border-radius:1.5rem; }

/* Shadows */
.shadow-xl { 
  box-shadow:0 10px 15px -3px rgba(0,0,0,0.4),
             0 4px 6px -4px rgba(0,0,0,0.4);
}

/* Width */
.max-w-xl { max-width:36rem; }
.w-full { width:100%; }

/* Input styling */
.sleep-input {
    width:90px;
    padding:12px;
    background:#0d2744;
    border:2px solid #f7d354;
    color:#fff;
    border-radius:12px;
    font-size:24px;
    text-align:center;
}

/* Buttons */
.sleep-btn-blue {
    background:#1e90ff;
    padding:14px;
    border-radius:12px;
    color:#fff;
    font-size:18px;
    font-weight:600;
    display:block;
    width:100%;
    text-align:center;
}
.sleep-btn-blue:hover { background:#1478db; }

.sleep-btn-yellow {
    background:#ffcf4a;
    padding:14px;
    border-radius:12px;
    color:#000;
    font-size:18px;
    font-weight:600;
    display:block;
    width:100%;
    text-align:center;
}
.sleep-btn-yellow:hover { background:#e8b93a; }

/* Time bubbles */
.sleep-bubble {
    background:#1e90ff;
    padding:16px 0;
    color:white;
    font-size:22px;
    border-radius:16px;
    text-align:center;
    font-weight:600;
}

/* Language links */
.sleep-lang {
    color:#f7d354;
    margin:0 8px;
    font-weight:600;
    text-decoration:none;
}
.sleep-lang:hover { text-decoration:underline; }
.mb-10 { margin-bottom: 2.5rem; }
.mt-6 { margin-top: 1.5rem; }