/*
 * Happy Orange
 * Active Kabala theme: warm ivory surfaces, burnt orange, amber, and gold.
 */

:root {
    --color-brg: #c85a17;
    --color-gold-light: #ffd76a;
    --color-gold-dark: #e99a16;
    --color-off-white: #fff8e8;
    --color-white: #fffdf8;
    --color-black: #2e1d13;
    --color-oxford-blue-dark: #fff8e8;
    --color-oxford-blue-medium: #fffdf8;
    --color-oxford-blue-light: #f6e1b9;
    --color-burgundy: #9e3f23;
    --color-text-on-dark: #3a2618;
    --color-subtle-text-on-dark: #876f5c;
    --color-text-on-light: #2e1d13;
    --color-grid-item-bg: #f2d7a5;
    --color-magic-grid-bg: #fff3d6;
    --color-magic-item-bg: #5a3420;
    --color-i0-bg: #ffd24d;
    --color-grid-item-border: #dfb66e;
    --color-magic-grid-border: #e99a16;
    --color-button-border: #d67a12;
}

body {
    background-image:
        radial-gradient(circle at 15% 5%, rgba(255, 255, 255, 0.34), transparent 26%),
        linear-gradient(145deg, #d85f18 0%, #ed9518 48%, #f8cd48 100%);
}

.main-container {
    background: rgba(255, 248, 232, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow: 0 24px 60px rgba(93, 43, 12, 0.24);
    color: var(--color-text-on-dark);
}

.language-toggle a {
    color: #5a2b12;
    font-weight: 700;
}

.language-toggle a:hover {
    color: #fffdf8;
}

.kabbalah-banner {
    background-image: linear-gradient(105deg, #cf5b17, #ee9918 52%, #ffd85c);
    border: 1px solid rgba(153, 70, 15, 0.22);
    box-shadow: 0 12px 28px rgba(143, 66, 14, 0.2);
}

.kabbalah-banner-text {
    color: #2e1d13;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.36);
}

.main-container .text-gray-400,
.main-container .text-white,
.main-container p.text-gray-700 {
    color: var(--color-text-on-dark) !important;
}

input[type="text"] {
    background-color: #fffdf8;
    border-color: #dfb66e;
    color: #3a2618;
    box-shadow: inset 0 1px 2px rgba(95, 48, 17, 0.05);
}

input[type="text"]::placeholder {
    color: #9a806b;
}

input[type="text"]:focus {
    border-color: #d86b14;
    box-shadow: 0 0 0 3px rgba(232, 147, 24, 0.2);
}

.kabbalah-button {
    background-image: linear-gradient(105deg, #d66216, #f0a51e 58%, #ffd85c);
    color: #2e1d13;
    box-shadow: 0 8px 18px rgba(158, 72, 13, 0.2);
}

.kabbalah-button:hover {
    background-image: linear-gradient(105deg, #e27218, #f4b52b 58%, #ffe178);
    box-shadow: 0 10px 22px rgba(158, 72, 13, 0.26);
}

.clear-button {
    background-color: transparent;
    color: #8b451c;
    border-color: #d69a43;
    box-shadow: none;
}

.clear-button:hover {
    background-color: #f8e7c6;
    box-shadow: none;
}

.output-section {
    background-color: transparent;
    border-color: #eccb91;
}

.calculation-card {
    background-color: #fffdf8;
    border: 1px solid #efd7aa;
    box-shadow: 0 10px 24px rgba(103, 54, 19, 0.1);
}

.grid-date-header-item {
    background-image: linear-gradient(105deg, #bb4e13, #da7118);
    color: #fffdf8;
}

.grid-index-header-item {
    background-image: linear-gradient(105deg, #e69a17, #f5c64d);
    color: #342319;
}

.grid-item {
    color: #3a2618;
    border: 1px solid rgba(202, 143, 56, 0.2);
}

.grid-item.blank,
.magic-box-item.blank {
    background-color: #f4ead8;
    color: #a58b72;
}

.magic-box-grid {
    background-color: #fff3d6;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.magic-box-item {
    color: #fff8e8;
}

.i0-item {
    color: #342319;
    box-shadow: 0 5px 12px rgba(164, 91, 14, 0.18);
}

.notice-message {
    color: #5e3a1d;
    background-color: #fff1cf;
    border-color: #e4bb70;
}

.annual-fortune-delimiter {
    background-color: #fff3d6;
    border-color: #e49a21;
    box-shadow: none;
}

.annual-fortune-delimiter h2 {
    color: #a94812;
}

.fortune-result {
    background-image: linear-gradient(to right, #c64f13, #ee9e1c);
}

@media (max-width: 639px) {
    body {
        padding: 12px;
    }

    .main-container {
        padding: 20px 16px;
        margin-top: 26px;
    }
}