/* Rasavi — shared theme tokens.
   Brand identity: TEAL-NAVY primary + SAFFRON accent.
   Accent rule: saffron has WCAG AA contrast issues on cream (~2.4:1).
   So in LIGHT mode, --accent-on-bg is teal-navy (high contrast for primary CTAs / active states).
                  --accent-mark stays saffron for SMALL highlights (badges, hairlines, save icon, price).
   In DARK mode, both flip — saffron pops on dark, becomes the primary signal color. */
:root {
    --bg: #fafaf8;
    --bg-void: #f0eee8;
    --bg-card: #ffffff;
    --bg-surface: #ffffff;
    --ink: #1a1a1a;
    --ink-2: #4a4a4a;
    --ink-3: #888;
    --line: rgba(0,0,0,0.08);

    /* Brand colors */
    --primary:        #1B3A4B;
    --primary-bright: #244E64;
    --primary-dim:    rgba(27,58,75,0.10);
    --saffron:        #E6B800;
    --saffron-bright: #FFD700;
    --saffron-dim:    rgba(230,184,0,0.18);

    /* SEMANTIC ACCENTS — light mode = teal for high-contrast surfaces, saffron for marks only */
    --accent:         #1B3A4B;       /* primary CTAs, active chips, logo */
    --accent-bright:  #244E64;       /* hover */
    --accent-soft:    #244E64;
    --accent-dim:     rgba(27,58,75,0.12);
    --accent-glow:    rgba(27,58,75,0.06);
    --accent-subtle:  rgba(27,58,75,0.08);
    --mark:           #E6B800;       /* saffron, used SPARINGLY: hairlines, badges, save-state, price, dot */
    --mark-soft:      rgba(230,184,0,0.18);

    /* Legacy tokens kept aliasing to the right things */
    --gold-trim: var(--mark);
    --warm: var(--accent);
    --warm-soft: var(--accent-dim);
    --sunset-grad: linear-gradient(135deg, var(--primary) 0%, var(--primary-bright) 100%);

    --font-display: 'Cormorant Garamond', 'Georgia', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --color-border: rgba(0,0,0,0.08);
    --duration-fast: 0.3s;
    --ease-smooth: cubic-bezier(0.23, 1, 0.32, 1);
}

html[data-theme="dark"] {
    --bg: #0A161E;
    --bg-void: #142834;
    --bg-card: #142834;
    --bg-surface: #1a3040;
    --ink: #f4f1e8;
    --ink-2: #c0bdb3;
    --ink-3: #888;
    --line: rgba(255,255,255,0.08);
    --color-border: rgba(255,255,255,0.08);

    /* DARK mode: saffron becomes the primary accent (it pops at ~10:1 against dark) */
    --accent:         #E6B800;
    --accent-bright:  #FFD700;
    --accent-soft:    #FFD700;
    --accent-dim:     rgba(230,184,0,0.18);
    --accent-glow:    rgba(230,184,0,0.10);
    --accent-subtle:  rgba(230,184,0,0.10);
    --mark:           #E6B800;
}

/* Canonical header — same across every page (gradi pattern, rasavi-coloured) */
.header {
    position: fixed; top: 0; left: 0; right: 0;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    transition: opacity 0.4s ease;
}
.header--hidden { opacity: 0; pointer-events: none; }
.back-btn {
    position: absolute; left: 0;
    background: none; border: none;
    color: var(--ink-3); font-size: 1.5rem;
    cursor: pointer;
    min-width: 56px; min-height: 56px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 0 0 0.75rem; transition: color 0.3s;
    font-family: inherit;
}
.back-btn:hover { color: var(--ink); }
.header-title {
    font-family: var(--font-body);
    font-size: 1.1rem; font-weight: 600;
    color: var(--ink);
}
.beta-tag {
    font-family: var(--font-body);
    font-size: 0.5rem; font-weight: 700;
    background: var(--accent); color: #fff;
    padding: 0.1rem 0.3rem; border-radius: 3px;
    letter-spacing: 0.06em; margin-left: 6px;
}

/* Site footer — gradi motto + glow logo (architectureofchoice pattern) */
.site-footer {
    min-height: 100dvh; min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; padding: 2rem;
    gap: 1rem;
}
.site-footer__motto {
    font-family: var(--font-display); font-style: italic;
    font-size: 1rem; color: var(--ink-3);
    margin-bottom: 0.4rem;
}
.site-footer__link {
    font-size: 0.82rem; color: var(--accent);
    text-decoration: none; font-weight: 500;
}
.site-footer__link:hover { opacity: 0.8; }
.site-footer__logo {
    margin-top: 1.4rem; display: inline-block;
}
.site-footer__logo img {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 2px solid var(--accent);
    opacity: 0.65;
    animation: footerGlow 3s ease-in-out infinite;
}
@keyframes footerGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(255,107,122,0.35); }
    50%      { box-shadow: 0 0 22px rgba(255,107,122,0.65), 0 0 44px rgba(255,107,122,0.25); }
}

/* Body baselines */
html { -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar { display: none; }
html { scrollbar-width: none; }