/* ============================================================
   Kasaya.ph — Global Colors
   All color assignments use var(--t-*) from TemplateModel.
   No hardcoded colors here — everything flows from the model.
   ============================================================ */

/* ── Page base ──────────────────────────────────────────────── */
.inv-page {
    background: var(--t-body-bg);
    color: var(--t-body-text);
    max-width: 480px;
    margin: 0 auto;
    overflow-x: hidden;
    min-height: 100svh;
}

/* ── Hero ───────────────────────────────────────────────────── */
.inv-hero-bg {
    background: var(--t-closing-bg);
}

.inv-hero-overlay {
    background: var(--t-hero-overlay, rgba(0,0,0,0));
}

.inv-hero-name {
    color: var(--t-hero-text);
}

.inv-hero-sub {
    color: var(--t-hero-sub);
}

.inv-hero-accent {
    color: var(--t-secondary);
}

/* ── Section backgrounds ────────────────────────────────────── */
.inv-bg-base {
    background: var(--t-body-bg);
}

.inv-bg-alt {
    background: var(--t-section-alt);
}

.inv-bg-dark {
    background: var(--t-closing-bg);
}

.inv-bg-rsvp {
    background: var(--t-rsvp-bg);
}

/* ── Text colors ────────────────────────────────────────────── */
.inv-text-primary {
    color: var(--t-primary);
}

.inv-text-secondary {
    color: var(--t-secondary);
}

.inv-text-body {
    color: var(--t-body-text);
}

.inv-text-muted {
    color: var(--t-body-text);
    opacity: .8;
}

.inv-text-dark {
    color: var(--t-hero-text);
}

.inv-text-rsvp {
    color: var(--t-rsvp-text);
}

/* ── Borders ────────────────────────────────────────────────── */
.inv-border {
    border: 1px solid var(--t-border);
}

.inv-border-top {
    border-top: 1px solid var(--t-border);
}

.inv-border-bottom {
    border-bottom: 1px solid var(--t-border);
}

.inv-border-left {
    border-left: 1px solid var(--t-border);
}

.inv-border-primary {
    border-color: var(--t-primary);
}

/* ── Accent borders ─────────────────────────────────────────── */
.inv-accent-left {
    border-left: 3px solid var(--t-primary);
}

.inv-accent-top {
    border-top: 3px solid var(--t-primary);
}

.inv-accent-bottom {
    border-bottom: 2px solid var(--t-primary);
}

/* ── Backgrounds with opacity ───────────────────────────────── */
/* Using pseudo-element opacity trick instead of color-mix()    */
/* for broader browser/IDE compatibility                         */

.inv-bg-soft {
    background: var(--t-primary);
    opacity: 0.08;
}

    .inv-bg-soft > * {
        opacity: calc(1 / 0.08);
    }
/* restore children */

/* Simpler approach — just use the primary color at low opacity  */
.inv-bg-soft {
    background: var(--t-section-alt);
    border: 1px solid var(--t-border);
}

.inv-bg-softer {
    background: var(--t-body-bg);
    border: 1px solid var(--t-border);
}

/* ── Button colors ──────────────────────────────────────────── */
.inv-btn-primary {
    background: var(--t-primary);
    color: var( --t-section-alt); /*--t-body-text*/
    border: none;
}

    .inv-btn-primary:hover {
        background: var(--t-primary);
        color: var(--t-body-bg);
    }

.inv-btn-ghost {
    background: transparent;
    color: var(--t-body-text);
    border: 1px solid var(--t-border);
}

    .inv-btn-ghost:hover {
        border-color: var(--t-primary);
        color: var(--t-primary);
    }

.inv-btn-accent {
    background: var(--t-primary);
    color: var(--t-section-alt); /* --t-body-bg*/
    border: none;
}

/* ── Form colors ────────────────────────────────────────────── */
.inv-input {
    background: var(--t-rsvp-text); /*--t-body-bg*/
    border: 1px solid var(--t-border);
    color: var(--t-rsvp-bg ); /*--t-rsvp-text*/
}

    .inv-input:focus {
        border-color: var(--t-primary);
        outline: none;
    }

.inv-label {
    color: var(--t-rsvp-text);
    opacity: .55;
}

/* ── Dividers ───────────────────────────────────────────────── */
.inv-rule-line {
    background: var(--t-primary);
    opacity: .4;
}

.inv-rule-dot {
    color: var(--t-primary);
}

.inv-section-rule {
    background: var(--t-border);
}

/* ── Timeline ───────────────────────────────────────────────── */
.inv-timeline-dot {
    background: var(--t-primary);
}

.inv-timeline-year {
    color: var(--t-primary);
}

.inv-timeline-line {
    background: var(--t-border);
}

/* ── Swatches / badges ──────────────────────────────────────── */
.inv-badge {
    background: var(--t-primary);
    color: var(--t-body-bg);
}

.inv-badge-outline {
    border: 1px solid var(--t-primary);
    color: var(--t-primary);
    background: transparent;
}

/* ── Closing / dark section text ────────────────────────────── */
.inv-closing-text {
    color: var(--t-hero-text);
}

.inv-closing-sub {
    color: var(--t-hero-sub);
}

.inv-closing-accent {
    color: var(--t-secondary);
}