/* ==================================================================
   OPTIONAL SITEWIDE LUXURY MODE
   Only loaded if the admin opts in under Settings > KarressMe Luxe Theme.
   Applies the aubergine/gold direction to general site chrome —
   background, headings, links, buttons — outside the KME components.
   ================================================================== */

body {
    background-color: var(--kme-ink);
    color: var(--kme-cream);
    font-family: var(--kme-font-body);
    position: relative;

    /* Ambient gold stardust scatter — reads as texture, not decoration */
    background-image:
        radial-gradient(1.4px 1.4px at 8% 18%, rgba(201, 162, 39, 0.55) 50%, transparent 51%),
        radial-gradient(1.2px 1.2px at 22% 62%, rgba(243, 233, 220, 0.35) 50%, transparent 51%),
        radial-gradient(1.6px 1.6px at 38% 12%, rgba(201, 162, 39, 0.4) 50%, transparent 51%),
        radial-gradient(1.1px 1.1px at 54% 74%, rgba(201, 162, 39, 0.5) 50%, transparent 51%),
        radial-gradient(1.3px 1.3px at 68% 30%, rgba(243, 233, 220, 0.3) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 82% 58%, rgba(201, 162, 39, 0.45) 50%, transparent 51%),
        radial-gradient(1.2px 1.2px at 91% 20%, rgba(201, 162, 39, 0.35) 50%, transparent 51%),
        radial-gradient(1.4px 1.4px at 12% 88%, rgba(243, 233, 220, 0.3) 50%, transparent 51%);
    background-repeat: repeat;
    background-size: 480px 480px;
    background-attachment: fixed;
}

/* Rose-branch flourish, tucked into two corners as quiet line art — gold on dark, low opacity */
body::before,
body::after {
    content: "";
    position: fixed;
    width: 220px;
    height: 280px;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.16;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='260' viewBox='0 0 200 260'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M100 250 C 88 205, 112 165, 96 122 C 84 92, 106 72, 88 38'/%3E%3Cellipse cx='72' cy='148' rx='19' ry='8' transform='rotate(-32 72 148)'/%3E%3Cellipse cx='118' cy='188' rx='17' ry='7.5' transform='rotate(26 118 188)'/%3E%3Cellipse cx='80' cy='100' rx='15' ry='6.5' transform='rotate(-18 80 100)'/%3E%3Ccircle cx='88' cy='34' r='13'/%3E%3Cpath d='M88 34 m-9,-6 a11,11 0 1,1 18,12 a9,9 0 1,1 -18,-12'/%3E%3Cpath d='M88 34 m-5,-11 a7,7 0 1,1 11,15'/%3E%3C/g%3E%3C/svg%3E");
}
body::before {
    top: -20px;
    left: -30px;
    transform: rotate(8deg);
}
body::after {
    bottom: -20px;
    right: -30px;
    transform: rotate(196deg);
}

/* Keep real content above the ambient corner flourishes */
#page, #content, .site-content, main, header, footer {
    position: relative;
    z-index: 1;
}

h1, h2, h3, h4 {
    font-family: var(--kme-font-display);
    color: var(--kme-cream);
}

a {
    color: var(--kme-gold);
}
a:hover {
    color: var(--kme-wine-light);
}

/* Generic content containers — scoped conservatively so we don't fight
   the active theme's own layout system, just its color/type choices. */
.site-content, .entry-content, .page-content, article {
    color: var(--kme-cream);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea,
select {
    background: var(--kme-surface);
    border: 1px solid var(--kme-gold-dim);
    color: var(--kme-cream);
    border-radius: 8px;
    padding: 10px 12px;
}
input::placeholder, textarea::placeholder {
    color: var(--kme-lilac);
}

button,
input[type="submit"],
.button,
.wp-block-button__link {
    background: var(--kme-wine);
    color: var(--kme-cream);
    border: none;
    border-radius: 24px;
    padding: 10px 22px;
    font-weight: 600;
    font-family: var(--kme-font-body);
    transition: background 0.2s ease, transform 0.15s ease;
}
button:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover {
    background: var(--kme-wine-light);
    transform: translateY(-1px);
}