@tailwind base;
@tailwind components;
@tailwind utilities;

.bg-forest-green {
    background-color: #003314 !important;
}

.text-forest-green {
    color: #003314;
}

.text-muted {
    color: gray;
}

.community-overlay {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 20px;
    border-radius: 12px;
}

.hero {
    background-image: url('forest-wallpaper.jpg');
    background-size: cover;
    background-position: center;
    height: 500px;
}

:root {
    --kyle-green: #065f46;
    --kyle-green-ink: #064e3b;
    --kyle-gold: #f59e0b;
    --bg: #f9fafb;
    --bg-soft: #ffffff;
    --bg-muted: #f3f4f6;
    --ink: #111827;
    --ink-dark: #111827;
    --ink-soft: #374151;
    --border: #e5e7eb;
    --shadow: 0 10px 24px rgba(0,0,0,.06);
    --radius: 12px;
    --radius-sm: 10px;
    --radius-lg: 16px;
    --ring: 3px solid rgba(245, 158, 11, .45);
    --elev-1: 0 6px 16px rgba(0,0,0,.08);
    --elev-2: 0 12px 28px rgba(0,0,0,.12);
    --dur-fast: .12s;
    --dur: .2s;
    --ease: cubic-bezier(.2,.7,.2,1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b0f0e;
        --bg-soft: #0f1715;
        --bg-muted: #0d1413;
        --ink: #e5e7eb;
        --ink-soft: #c7d2fe;
        --border: #1f2937;
        --shadow: 0 10px 24px rgba(0,0,0,.35);
        --kyle-green: #064e3b;
    }
    .text-forest-green {
        color: #10b981;
    }
    .text-muted, .text-muted-weak {
        color: #9ca3af !important;
    }
    .text-muted-strong {
        color: #d1d5db !important;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
}

:root {
    color-scheme: light dark;
}

html, body {
    background: var(--bg);
    color: var(--ink);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration-thickness: from-font;
    text-underline-offset: .15em;
    transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}

a:hover {
    text-decoration-color: currentColor;
}

h1, h2, h3 {
    line-height: 1.15;
    letter-spacing: -.01em;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

.bg-forest-green {
    background-color: var(--kyle-green);
}

.bg-kyle-gold {
    background-color: var(--kyle-gold) !important;
}

.text-forest-green {
    color: var(--kyle-green);
}

.hero {
    position: relative;
    isolation: isolate;
    background-size: cover;
    background-position: center;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 50% 20%, rgba(0,0,0,.55), rgba(0,0,0,.8));
    z-index: -1;
}

.community-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.7));
    padding: clamp(1.25rem, 2.5vw + 1rem, 2.25rem);
    border-radius: var(--radius);
    box-shadow: var(--elev-1);
    backdrop-filter: saturate(140%) blur(2px);
}

@supports not (backdrop-filter: blur(2px)) {
    .community-overlay {
        background: rgba(0,0,0,.55);
    }
}

.btn-kyle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: var(--radius-sm);
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
    box-shadow: 0 8px 18px rgba(6,95,70,.25);
    will-change: transform;
}

@media (prefers-color-scheme: dark) {
    .btn-kyle {
        box-shadow: 0 8px 18px rgba(6,95,70,.35);
    }
}

.btn-kyle:hover {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 12px 26px rgba(6,95,70,.35);
}

.btn-kyle:active {
    transform: translateY(0) scale(.99);
}

.btn-kyle:disabled {
    opacity: .65;
    cursor: not-allowed;
}

.progress-wrap {
    height: 10px;
    background: var(--bg-muted);
    border-radius: 9999px;
    overflow: clip;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--kyle-green), var(--kyle-gold));
    width: 0%;
    transform: translateZ(0);
}

.card {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-soft);
    box-shadow: var(--shadow);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.card:hover {
    transform: translateY(-1px);
    box-shadow: var(--elev-2);
    border-color: color-mix(in oklab, var(--border) 65%, var(--kyle-green));
}

.section {
    scroll-margin-top: 84px;
}

.micro {
    font-size: .72rem;
    opacity: .78;
}

.whisper:hover::after {
    content: attr(data-hover);
    margin-left: .5rem;
    font-size: .875rem;
    color: #d1fae5;
    opacity: .9;
}

nav {
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: saturate(130%) blur(6px);
}

nav a {
    position: relative;
    outline: none;
}

nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width var(--dur) var(--ease);
}

nav a:hover::after, nav a:focus-visible::after {
    width: 100%;
}

details {
    border-radius: var(--radius);
}

details > summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    padding-right: 2rem;
}

details > summary::-webkit-details-marker {
    display: none;
}

details > summary::after {
    content: "▸";
    position: absolute;
    right: .5rem;
    top: 50%;
    translate: 0 -50%;
    transition: rotate var(--dur) var(--ease);
}

details[open] > summary::after {
    rotate: 90deg;
}

blockquote {
    quotes: "“" "”" "‘" "’";
}

blockquote:before {
    content: open-quote;
    margin-right: .05em;
}

blockquote:after {
    content: close-quote;
    margin-left: .05em;
}

figure.card {
    overflow: clip;
}

figure.card blockquote {
    position: relative;
    z-index: 1;
}

figure.card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--kyle-green), var(--kyle-gold));
    border-radius: var(--radius) var(--radius) 0 0;
    z-index: 0;
}

footer {
    background: var(--kyle-green);
    color: #fff;
}

:where(button, [href], summary, input, select, textarea):focus-visible {
    outline: var(--ring);
    outline-offset: 2px;
    text-decoration: none;
}

::selection {
    background: color-mix(in oklab, var(--kyle-gold) 60%, transparent);
    color: #111;
}

@media (prefers-color-scheme: dark) {
    ::selection {
        color: #0b0f0e;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .community-overlay, .card {
        animation: kyle-fade .4s var(--ease) both;
    }
    @keyframes kyle-fade {
        from {
            opacity: 0;
            transform: translateY(2px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

.container {
    max-width: min(88rem, 92vw);
}

.hero {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.text-muted, .text-muted-weak {
    color: #4b5563;
}

.text-muted-strong {
    color: #374151;
}

nav {
    background: linear-gradient(to bottom, rgba(17,24,39,.72), rgba(17,24,39,.55));
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.hero::before {
    background: radial-gradient(120% 80% at 50% 20%, rgba(0,0,0,.65), rgba(0,0,0,.9));
}

.community-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.78));
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.on-dark {
    color: #fff !important;
}

.on-dark .text-muted, .on-dark .text-muted-weak, .on-translucent .text-muted, .on-translucent .text-muted-weak {
    color: #d1d5db !important;
}

.on-dark a, .on-translucent a {
    color: #f8fafc;
    text-decoration-color: rgba(248,250,252,.6);
}

.on-dark a:hover, .on-translucent a:hover {
    text-decoration-color: currentColor;
}

.on-dark-contrast {
    color: #fff !important;
}

.on-dark-contrast svg {
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.35));
}

.on-image {
    text-shadow: 0 1px 2px rgba(0,0,0,.85);
}

.btn-kyle {
    color: #fff;
    border: 1px solid rgba(0,0,0,.1);
}

.btn-kyle:where(.bg-forest-green, [class*="bg-"]) {
    box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset, 0 10px 22px rgba(0,0,0,.28);
}

.bg-kyle-gold {
    color: var(--ink-dark);
}

@media (prefers-color-scheme: dark) {
    .card {
        background: #141a18;
        border-color: #2a332f;
    }
}

:where(button, [href], summary, input, select, textarea):focus-visible {
    outline: 3px solid rgba(245, 158, 11, .75) !important;
    outline-offset: 2px;
}

a {
    color: color-mix(in oklab, var(--kyle-green) 80%, black);
    text-decoration-color: color-mix(in oklab, currentColor 60%, transparent);
}

a:hover {
    text-decoration-color: currentColor;
}

small, .micro {
    font-size: .78rem;
    opacity: .85;
}

.hero {
    min-height: 520px;
}