/* ══════════════════════════════════════════════════════════════
   Opulence Trade Portal — Design Tokens
   Single source of truth for brand colour, typography & spacing.
   Loaded as a dependency of every other plugin stylesheet so the
   variables are always available regardless of load order.

   Token values are sampled from the corporate logo and match the
   Trade Portal Homepage Developer Brief (April 2026).
   Do not introduce new brand colours in widget stylesheets —
   add them here and reference them via var(--otp-*).
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root {
    /* ── Brand palette ────────────────────────────────────── */
    --otp-green:       #2F5234;   /* primary forest green */
    --otp-green-mid:   #3D6B43;   /* hover / mid tier */
    --otp-green-lt:    #EBF2EC;   /* pale tint, card bg, alt rows */
    --otp-green-card:  #D6E8D8;   /* deeper tint, highlight rows */
    --otp-green-dark:  #1F3823;   /* deepest, hover on green CTAs */

    --otp-burg:        #8D3B3C;   /* corporate burgundy */
    --otp-burg-lt:     #F7EAEA;   /* pale burgundy callout bg */
    --otp-burg-dark:   #6E2C2D;   /* hover on burg CTAs */

    --otp-dark:        #1A1A1A;   /* near-black body text */
    --otp-mid:         #555555;   /* secondary text */
    --otp-light:       #888888;   /* footnotes, placeholder */
    --otp-rule:        #C8D8CA;   /* green-tinted border */
    --otp-rule-soft:   #E4E8E5;   /* very subtle divider */
    --otp-page:        #F9F7F4;   /* warm off-white page bg */
    --otp-white:       #FFFFFF;
    --otp-footer-bg:   #111A12;   /* near-black footer bg */

    /* Status accents (kept distinct from brand for clarity) */
    --otp-success:     #2F5234;   /* re-uses brand green */
    --otp-success-bg:  #EBF2EC;
    --otp-warning:     #B8861F;
    --otp-warning-bg:  #FBF3DC;
    --otp-error:       #8D3B3C;   /* re-uses brand burg */
    --otp-error-bg:    #F7EAEA;
    --otp-info:        #3D6B43;
    --otp-info-bg:     #EBF2EC;

    /* Special-order / classification badges (legacy, retained) */
    --otp-badge-special-order: #B8861F;

    /* ── Typography ───────────────────────────────────────── */
    --otp-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --otp-font-body:    'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --otp-fs-h1:        clamp(2.2rem, 5vw, 3.8rem);
    --otp-fs-h2:        clamp(1.5rem, 3vw, 2.3rem);
    --otp-fs-h3:        1.1rem;
    --otp-fs-body:      0.95rem;
    --otp-fs-small:     0.82rem;
    --otp-fs-label:     0.68rem;

    --otp-lh-display:   1.15;
    --otp-lh-body:      1.75;

    /* ── Layout ───────────────────────────────────────────── */
    --otp-max:          1120px;
    --otp-radius:       4px;
    --otp-radius-pill:  2rem;
    --otp-shadow-sm:    0 2px 8px rgba(47, 82, 52, 0.06);
    --otp-shadow-md:    0 4px 24px rgba(47, 82, 52, 0.12);
    --otp-shadow-lg:    0 12px 40px rgba(47, 82, 52, 0.18);

    --otp-trans-fast:   0.15s ease;
    --otp-trans:        0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Plugin-scoped base typography ─────────────────────────────
   Applied only inside our widget containers so the rest of the
   theme is unaffected. The `.otp-scope` utility class can be
   added to any wrapper that needs the brand fonts/colours.
   ────────────────────────────────────────────────────────────── */
.otp-scope,
.otp-stove-browser,
.otp-flue-browser,
.otp-firewood-browser,
.otp-trade-dashboard,
.elementor-trade-form {
    font-family: var(--otp-font-body);
    color: var(--otp-dark);
}

.otp-scope h1, .otp-scope h2, .otp-scope h3,
.otp-stove-browser h1, .otp-stove-browser h2, .otp-stove-browser h3,
.otp-flue-browser h1, .otp-flue-browser h2, .otp-flue-browser h3,
.otp-firewood-browser h1, .otp-firewood-browser h2, .otp-firewood-browser h3,
.otp-trade-dashboard h1, .otp-trade-dashboard h2, .otp-trade-dashboard h3,
.elementor-trade-form h1, .elementor-trade-form h2, .elementor-trade-form h3 {
    font-family: var(--otp-font-display);
    font-weight: 600;
    color: var(--otp-green);
    line-height: var(--otp-lh-display);
}

/* ── Shared CTA buttons ────────────────────────────────────────
   Use these classes on any new markup. Existing widget buttons
   will pick up the brand colours via the variable mapping below.
   ────────────────────────────────────────────────────────────── */
.otp-btn {
    display: inline-block;
    font-family: var(--otp-font-body);
    font-size: var(--otp-fs-small);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.75rem 1.8rem;
    border-radius: var(--otp-radius);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--otp-trans), color var(--otp-trans),
                border-color var(--otp-trans), box-shadow var(--otp-trans);
}

.otp-btn-primary {
    background: var(--otp-burg);
    border-color: var(--otp-burg);
    color: #fff;
}
.otp-btn-primary:hover {
    background: var(--otp-burg-dark);
    border-color: var(--otp-burg-dark);
    color: #fff;
}

.otp-btn-green {
    background: var(--otp-green);
    border-color: var(--otp-green);
    color: #fff;
}
.otp-btn-green:hover {
    background: var(--otp-green-mid);
    border-color: var(--otp-green-mid);
    color: #fff;
}

.otp-btn-outline {
    background: transparent;
    border-color: var(--otp-green);
    color: var(--otp-green);
}
.otp-btn-outline:hover {
    background: var(--otp-green);
    color: #fff;
}

/* ── Section labels ────────────────────────────────────────── */
.otp-section-label {
    display: block;
    font-size: var(--otp-fs-label);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--otp-burg);
    margin-bottom: 0.5rem;
}

/* ── Burgundy hairline accent ──────────────────────────────── */
.otp-rule {
    width: 48px;
    height: 2px;
    background: var(--otp-burg);
    border: 0;
    margin: 1rem 0;
}