/* Goofoff.cc unified visual polish */
:root {
    --gf-ink: #12201b;
    --gf-ink-soft: #52635d;
    --gf-paper: #fbfaf4;
    --gf-paper-deep: #f0eadf;
    --gf-card: rgba(255, 255, 252, 0.88);
    --gf-line: rgba(23, 43, 36, 0.14);
    --gf-green: #15735d;
    --gf-green-deep: #0d4f43;
    --gf-mint: #dff3e9;
    --gf-amber: #f0a43a;
    --gf-blue: #2f6f9f;
    --gf-red: #c24133;
    --gf-radius: 8px;
    --gf-shadow: 0 18px 45px rgba(18, 32, 27, 0.10);
    --gf-shadow-sm: 0 8px 24px rgba(18, 32, 27, 0.08);
    --gf-font: "Aptos", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    --gf-font-display: "Georgia", "Times New Roman", "Songti SC", "SimSun", serif;
}

html {
    background: var(--gf-paper);
}

body {
    color: var(--gf-ink);
    background:
        radial-gradient(circle at 12% 8%, rgba(21, 115, 93, 0.13), transparent 30rem),
        radial-gradient(circle at 88% 12%, rgba(240, 164, 58, 0.16), transparent 28rem),
        linear-gradient(180deg, #fffcf5 0%, #f5f0e8 54%, #edf6f0 100%);
    font-family: var(--gf-font);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.42;
    background-image:
        linear-gradient(rgba(18, 32, 27, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18, 32, 27, 0.035) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}

h1,
h2,
h3,
h4 {
    color: var(--gf-ink);
}

p,
li,
small {
    color: var(--gf-ink-soft);
}

a {
    color: var(--gf-green-deep);
}

a:hover {
    color: var(--gf-green);
}

button,
input,
select,
textarea {
    font-family: var(--gf-font);
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
select,
textarea {
    border: 1px solid var(--gf-line);
    border-radius: var(--gf-radius);
    background: rgba(255, 255, 255, 0.82);
    color: var(--gf-ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: rgba(21, 115, 93, 0.72);
    box-shadow: 0 0 0 4px rgba(21, 115, 93, 0.13);
    background: #fff;
}

.btn,
.button,
button {
    border-radius: var(--gf-radius);
}

.btn-primary,
.button,
.primary-button,
button[type="submit"] {
    background: linear-gradient(135deg, var(--gf-green-deep), var(--gf-green));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(21, 115, 93, 0.18);
}

.btn-primary:hover,
.button:hover,
.primary-button:hover,
button[type="submit"]:hover {
    filter: saturate(1.08) brightness(1.03);
    transform: translateY(-1px);
}

.btn-secondary,
.btn-ghost,
.secondary-button {
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid var(--gf-line);
    color: var(--gf-ink);
}

.panel,
.card,
.tool-card,
.trust-card,
.mini-card,
.feature-card,
.trip-setup-card,
.checklist-section,
.modal-content,
.data-card,
.content-section,
.year-details-table,
.calculation-details {
    border-color: var(--gf-line);
    box-shadow: var(--gf-shadow-sm);
}

.back-to-home {
    border: 1px solid var(--gf-line);
    background: rgba(255, 255, 255, 0.70);
    color: var(--gf-green-deep);
}

::selection {
    background: rgba(240, 164, 58, 0.28);
    color: var(--gf-ink);
}

@media (prefers-reduced-motion: no-preference) {
    .panel,
    .card,
    .tool-card,
    .trust-card,
    .mini-card,
    .feature-card,
    .trip-setup-card,
    .checklist-section {
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .tool-card:hover,
    .trust-card:hover,
    .mini-card:hover,
    .feature-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--gf-shadow);
    }
}