/* ============================================================
   Ample WhatsApp — global theme
   "Refined luxury messaging": deep emerald + warm ivory,
   champagne-gold accents, Fraunces display + Hanken Grotesk UI.
   ============================================================ */

:root {
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-ui: 'Hanken Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;

    /* Light (default) */
    --bg: #F1EDE3;
    --bloom-1: rgba(31, 169, 113, 0.16);   /* emerald glow */
    --bloom-2: rgba(201, 162, 39, 0.14);    /* champagne glow */
    --surface: #FFFFFF;
    --surface-2: #FBF8F1;
    --surface-3: #F4EFE4;
    --ink: #17231D;
    --ink-soft: #55655C;
    --ink-faint: #8A978F;
    --line: rgba(23, 35, 29, 0.09);
    --line-strong: rgba(23, 35, 29, 0.16);
    --brand: #0E5D43;
    --brand-2: #1FA971;
    --brand-ink: #FFFFFF;
    --gold: #B98A1E;
    --gold-2: #D9B24B;
    --bubble-in: #FFFFFF;
    --bubble-out: linear-gradient(145deg, #17936A 0%, #0E5D43 100%);
    --bubble-out-ink: #F3FBF7;
    --danger: #C0392B;
    --shadow-sm: 0 1px 2px rgba(23, 35, 29, .06), 0 1px 1px rgba(23, 35, 29, .04);
    --shadow-md: 0 6px 22px -8px rgba(23, 35, 29, .22);
    --shadow-lg: 0 24px 60px -18px rgba(14, 40, 30, .45);
    --ring: 0 0 0 3px rgba(31, 169, 113, .28);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #080C0A;
        --bloom-1: rgba(31, 169, 113, 0.18);
        --bloom-2: rgba(201, 162, 39, 0.10);
        --surface: #111A15;
        --surface-2: #16211B;
        --surface-3: #1C2A23;
        --ink: #EAF3EE;
        --ink-soft: #9FB2AA;
        --ink-faint: #64766D;
        --line: rgba(255, 255, 255, 0.08);
        --line-strong: rgba(255, 255, 255, 0.16);
        --brand: #1FA971;
        --brand-2: #34C88C;
        --brand-ink: #06110C;
        --gold: #E7C766;
        --gold-2: #F0D889;
        --bubble-in: #1A251F;
        --bubble-out: linear-gradient(145deg, #1FA971 0%, #0C6D4B 100%);
        --bubble-out-ink: #F3FBF7;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow-md: 0 8px 26px -10px rgba(0, 0, 0, .6);
        --shadow-lg: 0 26px 64px -20px rgba(0, 0, 0, .8);
    }
}

/* Manual override wins over system preference in both directions */
:root[data-theme="dark"] {
    --bg: #080C0A;
    --bloom-1: rgba(31, 169, 113, 0.18);
    --bloom-2: rgba(201, 162, 39, 0.10);
    --surface: #111A15;
    --surface-2: #16211B;
    --surface-3: #1C2A23;
    --ink: #EAF3EE;
    --ink-soft: #9FB2AA;
    --ink-faint: #64766D;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);
    --brand: #1FA971;
    --brand-2: #34C88C;
    --brand-ink: #06110C;
    --gold: #E7C766;
    --gold-2: #F0D889;
    --bubble-in: #1A251F;
    --bubble-out: linear-gradient(145deg, #1FA971 0%, #0C6D4B 100%);
    --bubble-out-ink: #F3FBF7;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 26px -10px rgba(0, 0, 0, .6);
    --shadow-lg: 0 26px 64px -20px rgba(0, 0, 0, .8);
}

:root[data-theme="light"] {
    --bg: #F1EDE3;
    --bloom-1: rgba(31, 169, 113, 0.16);
    --bloom-2: rgba(201, 162, 39, 0.14);
    --surface: #FFFFFF;
    --surface-2: #FBF8F1;
    --surface-3: #F4EFE4;
    --ink: #17231D;
    --ink-soft: #55655C;
    --ink-faint: #8A978F;
    --line: rgba(23, 35, 29, 0.09);
    --line-strong: rgba(23, 35, 29, 0.16);
    --brand: #0E5D43;
    --brand-2: #1FA971;
    --brand-ink: #FFFFFF;
    --gold: #B98A1E;
    --gold-2: #D9B24B;
    --bubble-in: #FFFFFF;
    --bubble-out: linear-gradient(145deg, #17936A 0%, #0E5D43 100%);
    --bubble-out-ink: #F3FBF7;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--font-ui);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overscroll-behavior: none;
    position: relative;
    min-height: 100dvh;
}

/* Atmospheric gradient-mesh background */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(60% 50% at 12% 6%, var(--bloom-1), transparent 60%),
        radial-gradient(55% 45% at 92% 96%, var(--bloom-2), transparent 62%),
        radial-gradient(45% 40% at 88% 4%, var(--bloom-1), transparent 70%);
    pointer-events: none;
}

/* Fine grain for texture */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: .035;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--brand-2); }

/* Refined scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 20px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); background-clip: content-box; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }

/* Blazor framework error UI */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    padding: .9rem 1.2rem;
    background: var(--danger);
    color: #fff;
    font-family: var(--font-ui);
    box-shadow: 0 -6px 24px rgba(0,0,0,.25);
}
#blazor-error-ui .reload { color: #fff; text-decoration: underline; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }