/* Shared blue theme for the public landing, login, and NCS demo surfaces. */
.font-pretendard {
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.bg-primary-50 { background-color: #eff6ff; }
.bg-primary-100 { background-color: #dbeafe; }
.bg-primary-400 { background-color: #60a5fa; }
.bg-primary-600 { background-color: #2563eb; }
.bg-accent-100 { background-color: #e0e7ff; }
.bg-accent-400 { background-color: #818cf8; }

.text-primary-200 { color: #bfdbfe; }
.text-primary-300 { color: #93c5fd; }
.text-primary-400 { color: #60a5fa; }
.text-primary-500 { color: #3b82f6; }
.text-primary-600 { color: #2563eb; }
.text-primary-700 { color: #1d4ed8; }
.text-accent-300 { color: #a5b4fc; }
.text-accent-400 { color: #818cf8; }
.text-accent-600 { color: #4f46e5; }

.from-primary-500 {
    --tw-gradient-from: #3b82f6;
    --tw-gradient-to: rgb(59 130 246 / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-600 {
    --tw-gradient-from: #2563eb;
    --tw-gradient-to: rgb(37 99 235 / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-accent-500 { --tw-gradient-to: #6366f1; }
.to-accent-600 { --tw-gradient-to: #4f46e5; }

.focus\:border-primary-500:focus { border-color: #3b82f6; }
.focus\:ring-primary-500:focus { --tw-ring-color: rgb(59 130 246 / 0.5); }
.focus\:ring-primary-500\/20:focus { --tw-ring-color: rgb(59 130 246 / 0.2); }

.hover\:bg-primary-50:hover { background-color: #eff6ff; }
.hover\:bg-primary-700:hover { background-color: #1d4ed8; }
.hover\:border-primary-300:hover { border-color: #93c5fd; }
.hover\:text-primary-400:hover { color: #60a5fa; }
.hover\:text-primary-600:hover { color: #2563eb; }
.hover\:text-primary-700:hover { color: #1d4ed8; }

.shadow-primary-500\/25 {
    box-shadow: 0 10px 15px -3px rgb(59 130 246 / 0.25), 0 4px 6px -4px rgb(59 130 246 / 0.25);
}
.shadow-primary-500\/30 {
    box-shadow: 0 10px 15px -3px rgb(59 130 246 / 0.3), 0 4px 6px -4px rgb(59 130 246 / 0.3);
}
.hover\:shadow-primary-500\/30:hover {
    box-shadow: 0 20px 25px -5px rgb(59 130 246 / 0.3), 0 8px 10px -6px rgb(59 130 246 / 0.3);
}
.hover\:shadow-primary-500\/40:hover {
    box-shadow: 0 20px 25px -5px rgb(59 130 246 / 0.4), 0 8px 10px -6px rgb(59 130 246 / 0.4);
}