/* ============================================
   FLAT DESIGN SYSTEM
   Zero depth. Bold color. Geometric purity.
   ============================================ */

/* ---- FONT ---- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
    /* Flat Design Tokens */
    --flat-bg: #FFFFFF;
    --flat-fg: #111827;
    --flat-primary: #0077b6;
    --flat-primary-hover: #005a8a;
    --flat-secondary: #10B981;
    --flat-secondary-hover: #059669;
    --flat-accent: #F59E0B;
    --flat-accent-hover: #D97706;
    --flat-muted: #F3F4F6;
    --flat-muted-hover: #E5E7EB;
    --flat-border: #E5E7EB;
    --flat-text-primary: #111827;
    --flat-text-secondary: #6B7280;
    --flat-text-muted: #9CA3AF;
    --flat-radius: 6px;
    --flat-radius-lg: 8px;
}

/* ---- GLOBAL RESETS FOR FLAT ---- */
body {
    font-family: 'Outfit', sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* ---- GLOBAL SHADOW/GRADIENT POLICY ----
   Flat design components (.flat-card, .flat-btn-*, etc.) already
   have box-shadow: none built in. We no longer nuke Tailwind
   utility classes globally — individual templates have been
   updated to remove gradients/shadows where needed.
*/

/* Override the common ocean-to-navy gradient buttons to solid */
.from-ocean.to-navy,
.from-blue-600.to-blue-800,
.from-blue-600.to-blue-500 {
    background-color: var(--flat-primary) !important;
    background-image: none !important;
}

/* translateY hover effects removed per-template, not globally */

/* ---- TYPOGRAPHY ---- */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: -0.02em;
}

/* ---- BUTTONS ---- */
/* Primary Button */
.flat-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--flat-primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--flat-radius);
    font-weight: 600;
    font-size: 0.875rem;
    transition: transform 200ms ease, background-color 200ms ease;
    box-shadow: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.flat-btn-primary:hover {
    background-color: var(--flat-primary-hover);
    transform: scale(1.05);
    color: white;
}
.flat-btn-primary:focus-visible {
    outline: 2px solid var(--flat-primary);
    outline-offset: 2px;
}

/* Secondary Button */
.flat-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--flat-muted);
    color: var(--flat-fg);
    padding: 0.75rem 1.5rem;
    border-radius: var(--flat-radius);
    font-weight: 500;
    font-size: 0.875rem;
    transition: transform 200ms ease, background-color 200ms ease;
    box-shadow: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.flat-btn-secondary:hover {
    background-color: var(--flat-muted-hover);
    transform: scale(1.05);
}

/* Outline Button */
.flat-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: transparent;
    color: var(--flat-primary);
    padding: 0.625rem 1.25rem;
    border-radius: var(--flat-radius);
    font-weight: 600;
    font-size: 0.875rem;
    border: 4px solid var(--flat-primary);
    transition: transform 200ms ease, background-color 200ms ease, color 200ms ease;
    box-shadow: none;
    cursor: pointer;
    text-decoration: none;
}
.flat-btn-outline:hover {
    background-color: var(--flat-primary);
    color: white;
    transform: scale(1.05);
}

/* ---- CARDS ---- */
.flat-card {
    background-color: var(--flat-bg);
    border-radius: var(--flat-radius-lg);
    padding: 1.5rem;
    box-shadow: none;
    border: none;
    transition: transform 200ms ease, background-color 200ms ease;
}
.flat-card:hover {
    transform: scale(1.02);
}
.flat-card-muted {
    background-color: var(--flat-muted);
}
.flat-card-blue {
    background-color: #EFF6FF;
}
.flat-card-green {
    background-color: #ECFDF5;
}
.flat-card-amber {
    background-color: #FFFBEB;
}

/* Static card (no hover scale) */
.flat-card-static {
    background-color: var(--flat-bg);
    border-radius: var(--flat-radius-lg);
    padding: 1.5rem;
    box-shadow: none;
    border: none;
}

/* ---- INPUTS ---- */
.flat-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background-color: var(--flat-muted);
    border: none;
    border-radius: var(--flat-radius);
    font-size: 0.875rem;
    color: var(--flat-fg);
    transition: background-color 200ms ease, border-color 200ms ease;
}
.flat-input:focus {
    background-color: var(--flat-bg);
    border: 2px solid var(--flat-primary);
    outline: none;
    padding: calc(0.625rem - 2px) calc(0.875rem - 2px);
}
.flat-input::placeholder {
    color: var(--flat-text-muted);
}

/* ---- LABELS ---- */
.flat-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--flat-fg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

/* ---- BADGES ---- */
.flat-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.625rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
}
.flat-badge-primary { background-color: #DBEAFE; color: #1D4ED8; }
.flat-badge-green { background-color: #D1FAE5; color: #047857; }
.flat-badge-amber { background-color: #FEF3C7; color: #92400E; }
.flat-badge-red { background-color: #FEE2E2; color: #991B1B; }
.flat-badge-purple { background-color: #EDE9FE; color: #6D28D9; }
.flat-badge-gray { background-color: #F3F4F6; color: #4B5563; }

/* ---- ICON CIRCLES ---- */
.flat-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: white;
    flex-shrink: 0;
    transition: transform 200ms ease;
}
.flat-icon-circle-sm {
    width: 2rem;
    height: 2rem;
    border-radius: var(--flat-radius);
}
.flat-icon-circle-primary { background-color: var(--flat-primary); color: white; }
.flat-icon-circle-secondary { background-color: var(--flat-secondary); color: white; }
.flat-icon-circle-accent { background-color: var(--flat-accent); color: white; }

/* Icon scale on parent hover */
.group:hover .flat-icon-scale {
    transform: scale(1.1);
}
.flat-icon-scale {
    transition: transform 200ms ease;
}

/* ---- SECTION BACKGROUNDS ---- */
.flat-section-white { background-color: #FFFFFF; }
.flat-section-muted { background-color: #F3F4F6; }
.flat-section-primary { background-color: #0077b6; color: white; }
.flat-section-secondary { background-color: #10B981; color: white; }
.flat-section-accent { background-color: #F59E0B; color: white; }
.flat-section-dark { background-color: #111827; color: white; }

/* ---- DECORATIVE SHAPES ---- */
.flat-deco {
    position: absolute;
    pointer-events: none;
}

/* ---- DIVIDERS ---- */
.flat-divider {
    border: none;
    border-top: 2px solid var(--flat-border);
}

/* ---- NAVIGATION OVERRIDES ---- */
.floating-nav {
    box-shadow: none !important;
}

/* ---- FOOTER OVERRIDES ---- */
.site-footer {
    background-color: #111827 !important;
    background-image: none !important;
    color: white;
}

.site-footer .footer-title,
.site-footer .footer-heading,
.site-footer h3, .site-footer h4 {
    color: white !important;
}

.site-footer .footer-description,
.site-footer .footer-link,
.site-footer p, .site-footer a {
    color: #9CA3AF !important;
}

.site-footer .footer-link:hover,
.site-footer a:hover {
    color: #0077b6 !important;
}

.site-footer .footer-logo-icon {
    background-color: #0077b6 !important;
}

.site-footer .border-gray-200 {
    border-color: #1F2937 !important;
}

.site-footer .text-gray-500 {
    color: #6B7280 !important;
}

/* ---- ALERT OVERRIDES ---- */
.alert {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: var(--flat-radius-lg) !important;
}
.alert:hover {
    transform: none !important;
    box-shadow: none !important;
}
.alert-icon {
    box-shadow: none !important;
    background-image: none !important;
    border-radius: var(--flat-radius) !important;
}
.alert-toast {
    box-shadow: none !important;
    border: 2px solid var(--flat-border) !important;
}

/* Flatten alert types */
.alert-success { background: #ECFDF5; border-color: #10B981; }
.alert-success .alert-icon { background: #10B981 !important; }
.alert-error { background: #FEF2F2; border-color: #EF4444; }
.alert-error .alert-icon { background: #EF4444 !important; }
.alert-warning { background: #FFFBEB; border-color: #F59E0B; }
.alert-warning .alert-icon { background: #F59E0B !important; }
.alert-info { background: #EFF6FF; border-color: var(--flat-primary); }
.alert-info .alert-icon { background: var(--flat-primary) !important; }

/* ---- MODAL OVERRIDES ---- */
.modal-content, [class*="modal"] {
    box-shadow: none !important;
    border-radius: var(--flat-radius-lg) !important;
}