/* ==========================================================================
   Lumen Healthcare — Design Tokens
   Colors and Type for the Lumen brand (a UME Health clinic on Harley Street).
   --------------------------------------------------------------------------
   Source of truth: figma "UME Group (Designer)" → /Lumen-Website/New-Design.
   The brand reads as a high-end private medical clinic: deep navy ink,
   warm champagne gold accents, generous serif display, restrained sans body.
   ========================================================================== */

/* ---------- Web fonts -------------------------------------------------- */

@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Libre Baskerville";
  src: url("./fonts/LibreBaskerville-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("./fonts/LibreBaskerville-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("./fonts/LibreBaskerville-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("./fonts/LibreBaskerville-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("./fonts/LibreBaskerville-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("./fonts/LibreBaskerville-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("./fonts/LibreBaskerville-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("./fonts/LibreBaskerville-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand color palette ------------------------------------ */

  /* Primary — deep navy "ink". The dominant brand surface (header, hero,
     footer, CTA backgrounds). Used for body copy on light surfaces too. */
  --lumen-ink:        rgb(0, 31, 48);     /* #001F30  primary navy */
  --lumen-sky:        rgb(224, 228, 230); /* #E0E4E6  light blue / cool surface */

  /* Primary — champagne gold. Headlines, accents, dividers, CTA chips. */
  --lumen-gold:       rgb(195, 174, 125); /* #C3AE7D  the signature gold */
  --lumen-gold-deep:  rgb(128, 90, 46);   /* #805A2E  gradient start */
  --lumen-gold-light: rgb(228, 205, 144); /* #E4CD90  gradient mid / hover */

  /* Tinted gold surfaces — for soft section backgrounds (hero stripes,
     QUICK ACCESS bar). The figma uses ~16% alpha gold over white. */
  --lumen-gold-16:    rgba(195, 174, 125, 0.16);
  --lumen-gold-08:    rgba(195, 174, 125, 0.08);
  --lumen-gold-32:    rgba(195, 174, 125, 0.32);

  /* Neutrals */
  --lumen-white:      rgb(255, 255, 255);
  --lumen-paper:      rgb(252, 252, 252);
  --lumen-mist:       rgb(246, 247, 251); /* #F6F7FB faint cool grey */
  --lumen-line:       rgb(217, 217, 217);
  --lumen-mute:       rgb(101, 103, 107); /* secondary text */
  --lumen-charcoal:   rgb(39, 38, 44);
  --lumen-black:      rgb(24, 24, 24);

  /* Status / informational accents (used sparingly, e.g. trust badges) */
  --lumen-info:       rgb(53, 168, 215);  /* #35A8D7 trustpilot blue */

  /* ---------- Brand gradients ---------------------------------------- */
  /* The Lumen wordmark uses a metallic gold gradient (deep → light → deep).
     This is THE brand gradient. CTAs use a simpler deep→base variant. */
  --lumen-gradient-gold:
    linear-gradient(
      180deg,
      rgb(128, 90, 46) 0%,
      rgb(228, 205, 144) 51%,
      rgb(128, 90, 46) 100%
    );
  --lumen-gradient-gold-cta:
    linear-gradient(180deg, rgb(113, 104, 77) 0%, rgb(195, 174, 125) 100%);

  /* ---------- Semantic role tokens ----------------------------------- */
  --color-bg:           var(--lumen-white);
  --color-bg-tint:      var(--lumen-gold-16); /* warm soft band */
  --color-bg-inverted:  var(--lumen-ink);
  --color-surface:      var(--lumen-white);
  --color-surface-mute: var(--lumen-mist);

  --color-fg:           var(--lumen-ink);     /* primary text on light */
  --color-fg-mute:      var(--lumen-mute);    /* secondary text on light */
  --color-fg-inverted:  var(--lumen-white);   /* text on navy */
  --color-fg-inverted-mute: rgba(255, 255, 255, 0.8);
  --color-accent:       var(--lumen-gold);    /* THE brand accent */
  --color-accent-strong: var(--lumen-gold-deep);
  --color-link:         var(--lumen-gold-deep);

  --color-border:       var(--lumen-line);
  --color-border-gold:  var(--lumen-gold);
  --color-border-soft:  rgba(0, 31, 48, 0.08);

  /* ---------- Typography ---------------------------------------------- */
  /* Two families. Display uses Libre Baskerville everywhere as a
     stand-in for the proprietary "Libre Caslon Display" used in the
     figma — the two are very close metrically, both tall transitional
     serifs with high contrast. Lato is for everything else. */
  --font-display: "Libre Baskerville", "Libre Caslon", "Caslon",
                  "Times New Roman", Georgia, serif;
  --font-body:    "Lato", -apple-system, "Segoe UI", "Helvetica Neue",
                  Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Monaco, Consolas,
                  "Courier New", monospace;

  /* Modular type scale (base 18px, ratio 1.25) — matches the typescale
     spec from the brand and the sizes seen in figma (18 / 24 / 32 / 64). */
  --fs-12:  0.667rem;   /* 12px — micro / overline alt */
  --fs-14:  0.778rem;   /* 14px — small / caption */
  --fs-18:  1rem;       /* 18px — BODY base, also nav links */
  --fs-23:  1.278rem;   /* 23px — lead paragraph */
  --fs-28:  1.556rem;   /* 28px — h4 */
  --fs-35:  1.944rem;   /* 35px — h3 */
  --fs-44:  2.444rem;   /* 44px — h2 */
  --fs-55:  3.056rem;   /* 55px — display sm */
  --fs-69:  3.833rem;   /* 69px — display lg, ~hero (figma uses 64px) */

  /* Line heights — body 1.5, displays tight 1.0 */
  --lh-tight: 1;
  --lh-snug:  1.2;
  --lh-body:  1.5;

  /* Letter spacing — display caps use +0.030em in figma */
  --tracking-display: 0.030em;
  --tracking-eyebrow: 0.080em;
  --tracking-tight:   -0.01em;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semi:     600;
  --weight-bold:     700;
  --weight-black:    900;

  /* ---------- Spacing scale (8pt grid) ------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-25: 100px;
  --space-37: 150px;
  --space-50: 200px; /* hero vertical pad in figma */

  /* ---------- Radius -------------------------------------------------- */
  /* The signature: opposite-corner rounding "24px 0 24px 0" on CTAs and
     hero callout cards. Standard 12px on most surfaces, full pill on
     icon discs and reviewer avatars. */
  --radius-none:  0;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    24px;
  --radius-pill:  9999px;
  --radius-cta:   24px 0 24px 0;
  --radius-cta-r: 0 24px 0 24px;

  /* ---------- Elevation ---------------------------------------------- */
  /* Elevation is restrained. Soft, low-contrast — never the candy-pop
     "card with bright shadow" look. */
  --shadow-xs: 0 1px 2px rgba(0, 31, 48, 0.04);
  --shadow-sm: 0 4px 12px rgba(0, 31, 48, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 31, 48, 0.08);
  --shadow-lg: 0 16px 48px rgba(0, 31, 48, 0.12);
  --shadow-gold: 0 8px 24px rgba(128, 90, 46, 0.18);
  --ring-gold: 0 0 0 1px var(--lumen-gold);

  /* ---------- Motion -------------------------------------------------- */
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-emphasis: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast:   140ms;
  --duration-base:   220ms;
  --duration-slow:   360ms;

  /* ---------- Layout -------------------------------------------------- */
  --container-max:    1760px; /* full-bleed inner column on 1920 frame */
  --container-pad-x:  80px;
  --container-pad-y:  100px;
  --header-height:    114px;
}

/* ---------- Base type ------------------------------------------------- */
html {
  font-size: 18px; /* base = 18 (matches figma & typescale) */
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Semantic typography classes ------------------------------- */
.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}

.t-display-xl,
h1.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-69);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-regular);
  color: var(--color-accent);
}

.t-display-lg, h1 {
  font-family: var(--font-display);
  font-size: var(--fs-55);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-regular);
  color: var(--color-accent);
}

.t-h2, h2 {
  font-family: var(--font-display);
  font-size: var(--fs-44);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-regular);
  color: var(--color-accent);
}

.t-h3, h3 {
  font-family: var(--font-display);
  font-size: var(--fs-35);
  line-height: var(--lh-snug);
  font-weight: var(--weight-regular);
  color: var(--color-fg);
}

.t-h4, h4 {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  line-height: var(--lh-snug);
  font-weight: var(--weight-regular);
  color: var(--color-fg);
}

.t-section-title {
  /* All-caps gold serif headline, the dominant section title pattern. */
  font-family: var(--font-display);
  font-size: var(--fs-44);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--color-accent);
}

.t-lead {
  font-family: var(--font-body);
  font-size: var(--fs-23);
  line-height: var(--lh-body);
  color: var(--color-fg);
  font-weight: var(--weight-regular);
}

p, .t-body {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  color: var(--color-fg);
}

.t-body-lg {
  font-size: var(--fs-23);
  line-height: var(--lh-body);
}

.t-small, small {
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--color-fg-mute);
}

.t-caption {
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-fg-mute);
  font-weight: var(--weight-bold);
}

.t-nav {
  /* Navigation links — Lato 18 in gold on navy */
  font-family: var(--font-body);
  font-size: var(--fs-18);
  font-weight: var(--weight-regular);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.t-button {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  font-weight: var(--weight-regular);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--duration-base) var(--easing-standard);
}
a:hover { color: var(--lumen-gold); }

::selection {
  background: var(--lumen-gold);
  color: var(--lumen-ink);
}