:root {
    /* Backgrounds */
    --bg-main: linear-gradient(to right, #97c4f1, #FFE4E1);
    --bg-card: linear-gradient(to right, #97c4f1, #5b9bd5);
    --bg-highlight: #FFFDF8;
    /* Text */
    --text-main: #3A312D;
    --text-secondary: #3A312D;
    /* Accent Colors */
    /*
    --primary: #FF9F43;
    --primary-hover: #F08A24;
    */
    --primary: #D99152;
--primary-hover: #C67C3D;
    --highlight: #FFF3D6;
    /* Status Colors */
    --error: red;
    --error-bg: #ffe6e6;
    --success: green;
    --success-bg: #e6ffe6;
    --notice: blue;
    --notice-bg: #e6f7ff;
    /* Table */
    --table-header: #1e3a5f;
}
/* ===== Focus States ===== */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 3px solid rgba(255, 159, 67, 0.4);
    outline-offset: 2px;
}
/* ===== Global ===== */
body {
    /*background: var(--bg-main); */
    background-image: url('/images/hero-background.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #2A241F;
    min-height: 100vh;
}
/* ===== Typography ===== */
.logo_title,
.logo_pitch {
    color: var(--text-main);
}
.intro p,
.intro-faq p {
    color: var(--text-secondary);
}
/* ===== Containers ===== */
.login-box {
    background: var(--bg-card);
}
.letter-preview,
.letter-body pre,
.delivery-option.selected {
    background: var(--bg-highlight);
}
/* ===== Buttons ===== */
.cta-button,
.faq-item {
    background: rgba(255, 159, 67, 0.78);

    color: var(--highlight);

    border: 1px solid rgba(255, 243, 214, 0.65);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.08);

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}
.cta-button:hover,
.faq-item:hover {
    background: rgba(240, 138, 36, 0.88);

    transform: translateY(-1px);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12);
}
/* ===== Status Messages ===== */
.error-message,
.success-message,
.notice-message {
    border-width: 2px;
    border-style: solid;
}
.error-message {
    color: var(--error);
    border-color: var(--error);
    background-color: var(--error-bg);
}
.success-message {
    color: var(--success);
    border-color: var(--success);
    background-color: var(--success-bg);
}
.notice-message {
    color: var(--notice);
    border-color: var(--notice);
    background-color: var(--notice-bg);
}
.site-footer {
    background: #1e2a38;
    color: #f4f4f4;
}
.footer-brand h4 {
    color: white;
}
.footer-brand p {
    color: #d6d6d6;
}
.footer-nav a {
    color: #f4f4f4;
    transition: color 0.2s ease;
}
.footer-nav a:hover {
    color: var(--primary);
}
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.15);
    color: #cfcfcf;
}
/* ===== Interactive ===== */
.active,
.faq-item summary::after {
    opacity: 0.9;
}
/* ===== Table ===== */
table thead tr {
    color: white;
    background: var(--table-header);
}
/* ===== Global Transition ===== */
* {
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}
/* ===== Delivery Option ===== */
.delivery-option.selected {
    color: var(--text-secondary);
    border-color: var(--primary);
}