/**
 * Shared Theme Styles
 * Modern teal + amber palette, typography, and motion defaults.
 */

:root {
    --bg: #f4f7f9;
    --bg-strong: #eaf1f4;
    --surface: #ffffff;
    --surface-soft: #f8fbfc;
    --surface-glass: rgba(255, 255, 255, 0.7);
    --ink: #0d1b24;
    --ink-muted: #53616a;
    --primary: #0ea5a8;
    --primary-strong: #0b7d80;
    --accent: #f59e0b;
    --accent-strong: #d97706;
    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #ef4444;
    --stroke: #e2e8ee;
    --shadow: 0 18px 40px rgba(15, 35, 45, 0.12);
    --shadow-soft: 0 10px 24px rgba(15, 35, 45, 0.08);
    --radius-xl: 26px;
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --font-display: "Space Grotesk", sans-serif;
    --font-body: "Manrope", sans-serif;
}

body {
    font-family: var(--font-body);
    color: var(--ink);
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(14, 165, 168, 0.16), transparent 60%),
        radial-gradient(900px 500px at 90% 0%, rgba(245, 158, 11, 0.18), transparent 55%),
        linear-gradient(180deg, #f7fbfc 0%, #f3f6f8 60%, #eef2f5 100%);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

a { color: inherit; }

.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--accent) !important; }
.text-info { color: #38bdf8 !important; }
.text-muted { color: var(--ink-muted) !important; }

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    border: none;
    font-weight: 700;
}

.btn-primary:hover { filter: brightness(0.95); }

.btn-outline-primary {
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

.btn-outline-primary:hover {
    background: var(--primary);
    color: #fff;
}

.btn-warning {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    border: none;
    color: #1a1a1a;
    font-weight: 700;
}

.btn-warning:hover { filter: brightness(0.95); }

.reveal {
    animation: rise 0.7s cubic-bezier(0.2, 0.65, 0.2, 1) both;
    animation-delay: calc(var(--stagger, 0) * 70ms);
}

@keyframes heroIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}