/* ════════════════════════════════════════════════════════════════
   CREAM-GOLD GLOBAL THEME
   Editorial / luxury warm palette — applied across all pages.
   Loaded after TGift.styles.css so it overrides scoped defaults.
   ════════════════════════════════════════════════════════════════ */

:root {
    --cream-bg-1: #f6efe0;
    --cream-bg-2: #ede1c6;
    --cream-radial-1: #f1e7d2;
    --cream-radial-2: #e9dcc0;

    --cream-text: #2d2418;
    --cream-text-strong: #1f1810;
    --cream-text-muted: #5b4a30;
    --cream-text-soft: #6b5a3e;

    --cream-eyebrow: #8a6f3a;
    --cream-gold: #b48a3a;
    --cream-gold-deep: #9c7530;
    --cream-gold-light: #e8c989;

    --cream-line: rgba(180, 138, 58, .25);
    --cream-line-strong: rgba(180, 138, 58, .55);

    --cream-card-bg: rgba(255, 255, 255, .65);
    --cream-card-bg-soft: rgba(255, 255, 255, .55);
    --cream-card-bg-strong: rgba(255, 255, 255, .82);
    --cream-card-border: rgba(180, 138, 58, .22);

    --serif: Georgia, "Times New Roman", "Iowan Old Style", serif;
}

/* ──────────────────────────────────────────────────────
   Body canvas — cream gradient + ambient drift + grain
   ────────────────────────────────────────────────────── */
html, body {
    background: transparent;
}

body {
    min-height: 100vh;
    color: var(--cream-text);
    background-color: var(--cream-bg-1);
    background-image:
        radial-gradient(900px 500px at 25% 18%, var(--cream-radial-1) 0%, transparent 65%),
        radial-gradient(700px 500px at 80% 90%, var(--cream-radial-2) 0%, transparent 70%),
        linear-gradient(135deg, var(--cream-bg-1) 0%, var(--cream-bg-2) 100%);
    background-attachment: fixed;
    background-size: 110% 110%, 110% 110%, 100% 100%;
    animation: cream-ambient 28s ease-in-out infinite;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(rgba(72, 56, 24, .055) 1px, transparent 1px),
        radial-gradient(rgba(72, 56, 24, .04) 1px, transparent 1px);
    background-size: 3px 3px, 5px 5px;
    background-position: 0 0, 1.5px 1.5px;
    mix-blend-mode: multiply;
    opacity: .55;
}

@keyframes cream-ambient {
    0%, 100% { background-position: 25% 18%, 80% 90%, 0% 0%; }
    50%      { background-position: 32% 24%, 72% 84%, 0% 0%; }
}

/* App content sits above the grain */
.top-appbar, .no-layout, article.content { position: relative; z-index: 1; }

/* ──────────────────────────────────────────────────────
   Make page wrappers transparent so cream shows through
   ────────────────────────────────────────────────────── */
body .su-page,
body .addr-page,
body .ord-page,
body .mo-page,
body .mu-page,
body .dr-page,
body .pm-page,
body .rpo-page,
body .reg-bg,
body .mr-page,
body .pa-page,
body .nf-page,
body .err-page,
body .setup-page,
body .reg-page,
body .pending-page,
body .feedef-page,
body .ck-page,
body .dt-page,
body .dpt-page,
body .pricing-page {
    background: transparent !important;
    color: var(--cream-text);
}

/* Hide decorative dark-theme orbs from old gradient pages */
body .reg-orb { display: none; }

/* ──────────────────────────────────────────────────────
   Headings → editorial serif, warm dark
   ────────────────────────────────────────────────────── */
body .su-title,
body .addr-title,
body .ord-title,
body .mo-title,
body .mu-title,
body .dr-title,
body .rpm-title,
body .rpo-title,
body .pa-title,
body .nf-title,
body .err-title,
body .setup-title,
body .reg-title,
body .pending-title,
body .feedef-title,
body .ck-title,
body .dt-title,
body .dpt-title,
body .pricing-title,
body .content h1:not(.brand-mark):not(.home-title),
body .content h2:not(.brand-mark):not(.home-title),
body .content h3 {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.02em;
    color: var(--cream-text-strong);
}

/* Subtitles → italic warm */
body .su-sub,
body .ord-sub,
body .dr-sub,
body .pa-sub,
body .mu-sub,
body .mo-sub {
    color: var(--cream-text-muted);
    font-style: italic;
    font-family: var(--serif);
}

/* ──────────────────────────────────────────────────────
   Cards / panels → frosted cream glass with gold border
   ────────────────────────────────────────────────────── */
body .su-card,
body .addr-card,
body .ord-card,
body .mo-card,
body .mo-sk-card,
body .mo-stat,
body .mu-card,
body .dr-card,
body .su-discount-card,
body .pa-card,
body .pricing-card,
body .feedef-card {
    background: var(--cream-card-bg);
    border: 1px solid var(--cream-card-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body .su-card:hover,
body .addr-card:hover,
body .ord-card:hover,
body .mo-card:hover,
body .mu-card:hover {
    border-color: var(--cream-line-strong);
    box-shadow: 0 12px 28px rgba(72, 56, 24, .12);
}

body .addr-card.is-default,
body .mo-addr-option--selected {
    border-color: var(--cream-gold) !important;
    background: rgba(180, 138, 58, .08) !important;
}

/* Empty / loading states */
body .su-empty,
body .addr-empty,
body .ord-empty,
body .mo-empty,
body .mu-empty,
body .dr-empty {
    color: var(--cream-text-soft);
    background: var(--cream-card-bg-soft);
    border: 1px dashed var(--cream-line);
    border-radius: 12px;
}
body .su-loading,
body .addr-loading,
body .ord-loading,
body .mo-loading,
body .mu-loading {
    color: var(--cream-text-muted);
}

/* ──────────────────────────────────────────────────────
   Tables → cream glass with gold accents
   ────────────────────────────────────────────────────── */
body .su-table,
body .dr-table,
body .mu-table,
body .pricing-table {
    background: var(--cream-card-bg);
    border: 1px solid var(--cream-card-border);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body .su-table th,
body .dr-table th,
body .mu-table th,
body .pricing-table th {
    background: rgba(255, 255, 255, .35);
    color: var(--cream-eyebrow);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .72rem;
    font-weight: 600;
}

body .su-table td,
body .dr-table td,
body .mu-table td,
body .pricing-table td {
    border-top: 1px solid var(--cream-line);
    color: var(--cream-text);
}

body .su-code {
    background: rgba(180, 138, 58, .12);
    color: var(--cream-text-strong);
}

/* ──────────────────────────────────────────────────────
   Buttons — replace purple/indigo with warm gold
   ────────────────────────────────────────────────────── */
body .su-btn-primary,
body .addr-btn-primary,
body .mo-btn--address,
body .mo-shop-btn,
body .pricing-btn-primary,
body .ck-btn-primary {
    background: var(--cream-gold) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: var(--cream-gold) !important;
}

body .su-btn-primary:hover,
body .addr-btn-primary:hover:not(:disabled),
body .mo-btn--address:hover,
body .mo-shop-btn:hover,
body .pricing-btn-primary:hover,
body .ck-btn-primary:hover {
    background: var(--cream-gold-deep) !important;
    border-color: var(--cream-gold-deep) !important;
}

body .su-btn-sm,
body .addr-btn-sm,
body .addr-btn-ghost {
    background: transparent;
    border: 1px solid var(--cream-line);
    color: var(--cream-text);
}

body .mu-filter-btn {
    background: var(--cream-card-bg-soft);
    border: 1px solid var(--cream-line);
    color: var(--cream-text-muted);
}
body .mu-filter-btn.active {
    background: var(--cream-gold);
    color: #fff;
    border-color: var(--cream-gold);
}

body .mo-tab--active {
    background: var(--cream-gold) !important;
    border-color: var(--cream-gold) !important;
}

/* Bootstrap btn-primary fallback */
body .btn-primary {
    background-color: var(--cream-gold);
    border-color: var(--cream-gold);
    color: #fff;
}
body .btn-primary:hover,
body .btn-primary:focus {
    background-color: var(--cream-gold-deep);
    border-color: var(--cream-gold-deep);
    color: #fff;
}

/* Links */
body .su-link,
body .ord-link,
body .ord-details summary {
    color: var(--cream-gold);
}
body .ord-final { color: var(--cream-gold-deep); }

/* ──────────────────────────────────────────────────────
   Inputs / selects → warm focus ring
   ────────────────────────────────────────────────────── */
body .su-input,
body .addr-input,
body .mu-role-select,
body .mo-search,
body .dr-filter-select,
body .feedef-input {
    background: rgba(255, 255, 255, .75);
    border: 1px solid var(--cream-line);
}
body .su-input:focus,
body .addr-input:focus,
body .mu-role-select:focus,
body .mo-search:focus,
body .dr-filter-select:focus,
body .feedef-input:focus {
    border-color: var(--cream-gold);
    outline: none;
    box-shadow: 0 0 0 3px rgba(180, 138, 58, .18);
}

/* ──────────────────────────────────────────────────────
   Tags / banners — keep semantics, warm the OK tone
   ────────────────────────────────────────────────────── */
body .addr-tag,
body .su-tag-ok {
    background: rgba(180, 138, 58, .15);
    color: var(--cream-gold-deep);
}

body .su-newlink {
    background: rgba(180, 138, 58, .12);
    border: 1px solid var(--cream-line);
}
body .su-newlink-label { color: var(--cream-gold-deep); }

/* Modals: keep white surface (legible) but warm the divider */
body .addr-modal,
body .mu-modal,
body .mo-modal,
body .mo-addr-modal {
    border: 1px solid var(--cream-line);
}
body .addr-modal-head,
body .addr-modal-foot,
body .mu-modal-head,
body .mu-modal-foot,
body .mo-modal-foot {
    border-color: var(--cream-line) !important;
}

/* ──────────────────────────────────────────────────────
   Reduced motion
   ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    body { animation: none; }
}