:root {
    --primary: #2563eb; /* blue-600 */
    --ink: #0f172a;     /* slate-900 */
    --muted: #475569;   /* slate-600 */
    --bg: #f8fafc;      /* slate-50 */
    --card-bg: #ffffff;
    --border: #e2e8f0;  /* slate-200 */
    --ring: rgba(37, 99, 235, .25);
    --radius: 1rem;
    --shadow: 0 10px 25px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
}

html[lang="en"] body { font-family: 'Inter', sans-serif; }
html[lang="ar"] body { font-family: 'Cairo', sans-serif; }

body {
    background-color: var(--bg);
    color: var(--muted);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.gradient-text {
    background: linear-gradient(90deg, var(--ink), var(--muted));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.timer-box {
    background: #f1f5f9;
    border: 1px solid var(--border);
    color: var(--ink);
}

.form-container {
    background-color: #f1f5f9;
    border: 1px solid var(--border);
}

.form-container:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--ring);
}

.notify-btn {
    background-color: var(--primary);
    color: white;
    transition: background-color 0.2s ease-in-out;
}
.notify-btn:hover {
    background-color: #1d4ed8;
}

.image-collage img {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.image-collage img:hover {
    transform: scale(1.05) rotate(1deg);
    box-shadow: 0 20px 30px -10px rgb(0 0 0 / 0.15);
    z-index: 10;
}

/* RTL SPECIFIC STYLES */
html[dir="rtl"] .lg\:text-left { text-align: right !important; }
html[dir="rtl"] .lg\:justify-start { justify-content: flex-end !important; }
html[dir="rtl"] .rotate-\[-4deg\] { transform: rotate(4deg); }
html[dir="rtl"] .rotate-\[5deg\] { transform: rotate(-5deg); }
html[dir="rtl"] .rotate-\[2deg\] { transform: rotate(-2deg); }
html[dir="rtl"] .image-collage img:hover { transform: scale(1.05) rotate(-1deg); }