/* =====================================================================
   BRAND-ALIGN-01: the website adopts the design language the mobile
   apps already ship.
   =====================================================================

   The apps carry a considered design system (EgBookings-driver
   src/design/tokens.js): a deep teal, an editorial serif for display
   type, and a documented neutral ramp. The website was running the
   purchased theme's defaults — a brighter generic teal (#0ea5a4) and
   #667eea, which is the Bootstrap-admin accent that ships with the
   template. So a customer who booked on the web and then opened the
   app saw two different companies, and the app was the better-looking
   one.

   Every value below is copied from the app token file so there is ONE
   brand, not two. When the apps' tokens change, mirror them here.

   Deliberately scoped to colour and typography — no layout, spacing or
   component changes — so the visual risk is contained and this is
   cleanly revertible.
   ===================================================================== */

:root {
    /* ---- Brand (app: colors.teal / teal2 / teal3) ---- */
    --eg-teal: #0F6E68;
    --eg-teal-mid: #0A4E4A;
    --eg-teal-deep: #063D3A;
    --eg-teal-ink: #051816;
    --eg-mint: #7FD9CE;
    --eg-mint-soft: #E1F3F0;

    /* ---- Neutrals (app: inkDeep / ink2 / ink3 / hair / cream) ---- */
    --eg-ink: #0A0A0A;
    --eg-ink-2: #4B5563;
    --eg-ink-3: #9CA3AF;
    --eg-hair: #E5E7EB;
    --eg-cream: #F5F5F3;
    --eg-surface: #FFFFFF;

    /* ---- Status (app) ---- */
    --eg-success: #16A34A;
    --eg-danger: #E11D48;
    --eg-gold: #D97706;

    /* ---- Type ---- */
    --eg-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --eg-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------------------------------------------------------------------
   Typography
   The theme shipped no font-family of its own, so headings and body
   were falling through to Bootstrap's system stack. Fraunces on the
   headings is what gives the apps their editorial feel; Manrope keeps
   body copy clean at small sizes on a mid-range Android.
   ------------------------------------------------------------------ */
body {
    font-family: var(--eg-font-body);
    color: var(--eg-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .h1, .h2, .h3 {
    font-family: var(--eg-font-display);
    font-optical-sizing: auto;
    letter-spacing: -0.015em;
    color: var(--eg-ink);
}

h4, h5, h6, .h4, .h5, .h6 {
    font-family: var(--eg-font-body);
    font-weight: 700;
    letter-spacing: -0.01em;
}

p, li, label, input, select, textarea, button, a {
    font-family: var(--eg-font-body);
}

/* Body copy at a comfortable measure and rhythm. Long paragraphs at
   full container width are the most common "cheap template" tell. */
p {
    line-height: 1.65;
    color: var(--eg-ink-2);
}

/* ---------------------------------------------------------------------
   Focus visibility — a real accessibility gap in the purchased theme,
   and a detail people read as "well built".
   ------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(15, 110, 104, 0.35);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Selection picks up the brand instead of the browser default blue. */
::selection {
    background: var(--eg-mint-soft);
    color: var(--eg-teal-ink);
}

/* ---------------------------------------------------------------------
   BRAND-ALIGN-01: weight normalisation.

   The purchased theme sets font-weight 800/900 on several headings —
   sensible for the geometric sans it assumed, wrong for a serif. Our
   Fraunces range tops out at 700, so 800/900 would be SYNTHESISED by
   the browser (faux-bold: smeared stems, broken optical sizing) and
   would look worse than the original.

   Cap display headings at 700. Fraunces at 700 already carries plenty
   of weight; it does not need faking.
   ------------------------------------------------------------------ */
h1, h2, h3, .h1, .h2, .h3,
.hero-professional h1,
.hero-professional h2,
.section-header-pro h2,
.cta-pro h2 {
    font-weight: 700;
}

/* Optical sizing: Fraunces is designed to change shape by size. Let
   large display text use the display cut and small text the text cut —
   this is most of what makes the app headings feel considered. */
h1, .h1, .hero-professional h1, .hero-professional h2 {
    font-variation-settings: 'opsz' 96, 'SOFT' 0, 'WONK' 0;
    line-height: 1.12;
}

h2, h3, .h2, .h3 {
    font-variation-settings: 'opsz' 36;
    line-height: 1.2;
}

/* ---------------------------------------------------------------------
   Finish: softer, layered shadows and calmer borders.

   The theme's shadows are single large blurs at high opacity, which
   reads as heavy. Two-layer shadows (tight contact + wide ambient) are
   what make a card look like it is sitting on the page rather than
   floating above it. Purely cosmetic — no geometry changes.
   ------------------------------------------------------------------ */
.service-card-pro,
.quote-section .quote-card,
.faq-item-pro,
.testimonial-card-pro {
    box-shadow:
        0 1px 2px rgba(10, 10, 10, 0.04),
        0 12px 32px rgba(10, 10, 10, 0.07);
    border-color: var(--eg-hair);
}

.service-card-pro:hover {
    box-shadow:
        0 2px 4px rgba(10, 10, 10, 0.05),
        0 20px 48px rgba(15, 110, 104, 0.14);
}

/* Eyebrow labels read as a considered detail when they are small,
   spaced and quiet rather than loud. */
.badge-pro {
    font-family: var(--eg-font-body);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.72rem;
}