/* Small custom refinements layered on top of Tailwind (CDN build has no @apply, keep this minimal) */
:root {
    --brand-red: #d0021b;
    --brand-red-dark: #a80016;
    --brand-red-deep: #7f0010;
    --brand-gold: #ffb81c;
    --brand-yellow: #ffe08a;
    --brand-ink: #111111;
    --brand-cream: #fff8e6;
    --brand-border: rgba(17, 17, 17, 0.12);
    --brand-surface-dark: #171719;
}
body {
    font-feature-settings: "kern";
    background:
        radial-gradient(circle at top left, rgba(255, 184, 28, 0.22), transparent 34rem),
        linear-gradient(180deg, #fffdf7 0%, var(--brand-cream) 100%);
}
.form-input, .form-select, .form-textarea {
    display: block;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid var(--brand-border);
    padding: 0.6rem 0.85rem;
    font-size: 0.925rem;
    background-color: #fff;
    color: #111827 !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-input::placeholder, .form-textarea::placeholder {
    color: #6b7280 !important;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--brand-red);
    box-shadow: 0 0 0 3px rgba(208, 2, 27, 0.14);
}
a {
    text-underline-offset: 3px;
}
.theme-toggle {
    color-scheme: light dark;
}
.gabay-letter {
    color: #fff;
    font-weight: 800;
}
.nav-link {
    border: 1px solid transparent;
}
.nav-link:hover,
.nav-link:focus {
    color: #fff !important;
    background: rgba(255, 184, 28, 0.18);
    border-color: rgba(255, 224, 138, 0.7);
    box-shadow: 0 0 0 3px rgba(255, 184, 28, 0.14);
}
.nav-action {
    background-color: var(--brand-red);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.nav-action:hover,
.nav-action:focus {
    background: var(--brand-gold) !important;
    color: var(--brand-ink) !important;
    border-color: #fff !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}
/* Hard fallback: these utility classes are generated at runtime by the
   Tailwind CDN script. If that script is blocked/slow/offline, buttons using
   them would otherwise render with no background (white text on a light
   page = unreadable). Define them here too so styling never depends solely
   on the CDN having loaded. */
.bg-accent {
    background-color: var(--brand-red) !important;
}
.text-white {
    color: #fff !important;
}
.module-nav-link:hover,
.module-nav-link:focus {
    background: var(--brand-yellow);
    border-color: var(--brand-gold);
    color: var(--brand-ink) !important;
    font-weight: 700;
}
.theme-label-light {
    display: none;
}
html.dark .theme-label-dark {
    display: none;
}
html.dark .theme-label-light {
    display: inline;
}
.bg-navy-950,
.bg-navy-900 {
    background:
        linear-gradient(135deg, var(--brand-red-deep) 0%, var(--brand-red) 62%, #ef3b2d 100%) !important;
}
.bg-navy-800 {
    background-color: var(--brand-red-dark) !important;
}
.text-navy-950,
.text-navy-900,
.text-navy-800 {
    color: var(--brand-ink) !important;
}
.text-accent-light,
.text-accent-gold {
    color: var(--brand-yellow) !important;
}
.border-accent\/20 {
    border-color: rgba(255, 184, 28, 0.45) !important;
}
.bg-white {
    border-color: rgba(17, 17, 17, 0.10);
}
.shadow-sm,
.shadow-lg {
    box-shadow: 0 10px 30px rgba(127, 0, 16, 0.08);
}
header.bg-navy-950,
footer.bg-navy-950,
aside.bg-navy-900,
section.bg-navy-950,
section.bg-navy-900 {
    color: #fff;
}
header .text-gray-200,
header .text-gray-300,
footer .text-gray-300,
footer .text-gray-400,
aside .text-gray-200,
aside .text-gray-300,
aside .text-gray-400,
section.bg-navy-950 .text-gray-300,
section.bg-navy-900 .text-gray-300 {
    color: rgba(255, 255, 255, 0.84) !important;
}
section.bg-navy-950 .text-navy-950,
section.bg-navy-900 .text-navy-950,
.bg-amber-400 .text-navy-950 {
    color: var(--brand-ink) !important;
}
html.dark body {
    background:
        radial-gradient(circle at top left, rgba(208, 2, 27, 0.26), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(255, 184, 28, 0.10), transparent 28rem),
        #0f0f10;
    color: #e5e7eb;
}
html.dark .bg-white {
    background-color: var(--brand-surface-dark) !important;
}
html.dark .bg-gray-50 {
    background-color: #111113 !important;
}
html.dark .border-gray-200,
html.dark .border-gray-100 {
    border-color: rgba(255, 184, 28, 0.18) !important;
}
html.dark .text-navy-900,
html.dark .text-navy-800,
html.dark .text-navy-950,
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-700 {
    color: #f4f4f5 !important;
}
html.dark .text-gray-600,
html.dark .text-gray-500 {
    color: #c4c4c7 !important;
}
html.dark .form-input,
html.dark .form-select,
html.dark .form-textarea {
    background-color: #101012 !important;
    border-color: rgba(255, 184, 28, 0.24);
    color: #f4f4f5 !important;
}
html.dark .form-input::placeholder,
html.dark .form-textarea::placeholder {
    color: #9ca3af !important;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}