/* ---------------------------------------------------------------------------
   Aurora skin — MiroTalk P2P guest pages (landing, login, newcall, waitingRoom).
   Loaded LAST so it wins without needing !important everywhere; the !importants
   that remain are against upstream rules that themselves use hardcoded colours.

   Palette + type are lifted verbatim from the real site:
     site/plaintosee-unified/public/css/site.css
     paper #f6f1e7 · paper-3 #fbf6ec · ink #1a1814 · ink-soft #4a4540
     ink-mute #6a655c · accent #6b1d1d · accent-2 #8a4b1a · rule #c9bfa8

   NOTE: we deliberately do NOT remap the --ds-neutral-* ramp. Upstream's dark
   theme uses the light end of that ramp for TEXT, so re-pointing it at paper
   would render text invisible on paper. Brand tokens only; text is set
   explicitly below.

   The in-call room (client.html) is intentionally NOT skinned — video reads
   better on a dark surface. It gets aurora-type.css (font only).
--------------------------------------------------------------------------- */

:root {
    --au-paper: #f6f1e7;
    --au-paper-3: #fbf6ec;
    --au-ink: #1a1814;
    --au-ink-soft: #4a4540;
    --au-ink-mute: #6a655c;
    --au-accent: #6b1d1d;
    --au-accent-2: #8a4b1a;
    --au-rule: #c9bfa8;
    --au-rule-soft: #ddd2b8;

    --au-sans: 'IBM Plex Sans', 'Inter', 'Segoe UI', Arial, sans-serif;
    --au-serif: 'Iowan Old Style', 'Iowan', Georgia, 'Times New Roman', serif;

    /* brand ramp: MiroTalk blue -> Aurora red/amber */
    --ds-brand-50: #f7efe6;
    --ds-brand-100: #eddfcd;
    --ds-brand-300: #c08a5c;
    --ds-brand-500: #8a4b1a;
    --ds-brand-600: #6b1d1d;
    --ds-brand-700: #571717;
    --ds-info: #8a4b1a;
}

/* --- page ---------------------------------------------------------------- */

html,
body {
    background: var(--au-paper) url('../images/aurora-bg.png') center center / cover no-repeat fixed !important;
    color: var(--au-ink) !important;
    font-family: var(--au-sans) !important;
}

/* the stock neon wave; our background carries the swirl now */
.hero::after {
    display: none !important;
}

h1,
h2,
h3 {
    font-family: var(--au-serif) !important;
    font-weight: 400 !important;
    color: var(--au-ink) !important;
    letter-spacing: -0.3px;
}

p,
label,
span,
li {
    color: var(--au-ink-soft);
}

a {
    color: var(--au-accent) !important;
}
a:hover {
    color: var(--au-accent-2) !important;
}

/* --- the card ------------------------------------------------------------ */

.waiting-card,
.login-card,
#joinRoomForm.login-card {
    background: var(--au-paper-3) !important;
    background-color: var(--au-paper-3) !important;
    border: 1px solid var(--au-rule-soft) !important;
    box-shadow: 0 18px 50px rgba(26, 24, 20, 0.12) !important;
    color: var(--au-ink) !important;
}

.waiting-icon,
.login-icon {
    background: linear-gradient(135deg, rgba(107, 29, 29, 0.14), rgba(138, 75, 26, 0.05)) !important;
    border: 1px solid rgba(107, 29, 29, 0.22) !important;
}
.waiting-icon i,
.login-icon i,
.waiting-icon svg,
.login-icon svg {
    color: var(--au-accent) !important;
    fill: var(--au-accent) !important;
}

.waiting-spinner-dot {
    background-color: var(--au-accent-2) !important;
}

/* the "Waiting for host to start the meeting..." status line */
.waiting-status,
.waiting-note {
    color: var(--au-accent-2) !important;
}

/* --- form controls ------------------------------------------------------- */

input,
select,
textarea {
    background: rgba(255, 255, 255, 0.66) !important;
    border: 1px solid var(--au-rule) !important;
    color: var(--au-ink) !important;
}
input::placeholder {
    color: #8a857c !important;
}

button.btn-primary,
.btn-primary,
#joinRoomButton,
#loginButton {
    background: var(--au-accent) !important;
    border-color: var(--au-accent) !important;
    color: #fff !important;
}
button.btn-primary:hover,
.btn-primary:hover,
#joinRoomButton:hover,
#loginButton:hover {
    background: var(--au-accent-2) !important;
    border-color: var(--au-accent-2) !important;
}

/* a horizontal rule inside the card, matching the site's rules */
hr {
    border: 0 !important;
    border-top: 1px solid var(--au-rule-soft) !important;
}

/* upstream sets #dcdcdc here (dark-theme body copy) -> unreadable on paper */
.waiting-description,
.login-description {
    color: var(--au-ink-soft) !important;
}

/* --- icons + divider ------------------------------------------------------
   Order matters: the generic icon colour first, then the accented exceptions,
   so the later rules win at equal specificity. */
.waiting-card i,
.login-card i {
    color: var(--au-ink-mute) !important;
}

.waiting-icon i,
.login-icon i,
.waiting-audio-btn,
.waiting-audio-btn i,
.waiting-card .fa-play,
.waiting-card .fa-pause,
.waiting-card .fa-volume-high,
.waiting-card .fa-volume-xmark {
    color: var(--au-accent) !important;
}

/* the divider above the audio player renders as a near-black bar upstream */
.waiting-card hr,
.login-card hr,
.waiting-divider,
.waiting-card .divider {
    border: 0 !important;
    border-top: 1px solid var(--au-rule-soft) !important;
    background: transparent !important;
    height: 1px !important;
}

/* --- buttons win over the generic text/icon colours above -----------------
   The generic `p,label,span,li` and `.login-card i` rules were bleeding into
   button labels and glyphs, painting them ink-on-accent. Descendants of a
   button should simply inherit the button's own colour. */
.waiting-card button *,
.login-card button * {
    color: inherit !important;
}

#loginButton,
#loginButton *,
button.login-btn,
button.login-btn * {
    color: #fff !important;
}