/* Only the weights this widget uses. font-display:swap => text paints
   immediately in the fallback face, then swaps. Never invisible text. */
@font-face{font-family:"Tiempos Text";src:url("../fonts/TiemposText-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("../fonts/GeneralSans-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("../fonts/GeneralSans-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("../fonts/GeneralSans-Semibold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("../fonts/GeneralSans-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}

/* ============================================================
   Verdara Design System — Colors & Type
   ============================================================
   Brand: Verdara (Retirement Reclaimed)
   A retirement brand rooted in nature, time, and reclaimed
   stillness. The system pairs a deep "forest at dusk" teal-green
   with chalky off-whites and one electric chartreuse accent.
   ============================================================ */

/* ---------- Webfonts ---------- */

/* Semibold Italic — intentionally NOT registered. Per brand: never use. */
/* Bold Italic — intentionally NOT registered. Per brand: never use. */

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* ---------- Type families ---------- */
  --font-serif: "Tiempos Text", "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-sans:  "General Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Primary palette ---------- */

  /* Neutrals — paper-like off-whites, never pure #fff in body */
  --neutral-50:  #FDFDFD;   /* near-white */
  --neutral-100: #F3F2ED;   /* paper / off-white  ← default page bg */
  --neutral-200: #EBE9E0;   /* warm stone */

  /* Dark teals — the brand's gravitational center */
  --teal-500: #27545F;      /* mid teal — secondary surfaces */
  --teal-700: #19353C;      /* deep teal — primary ink + dark bg */
  --teal-900: #13292F;      /* near-black teal — text on light */

  /* Greens — sage to chartreuse */
  --green-100: #E4E9D7;     /* pale sage */
  --green-300: #CDD7B4;     /* sage */
  --green-500: #DDF4A9;     /* chartreuse accent (signature) */

  /* ---------- Secondary palette ---------- */
  --sec-teal-soft:   #93B9BF;
  --sec-teal-slate:  #51636C;
  --sec-sand:        #EDD6A1;
  --sec-lime:        #A7D247;
  --sec-sky:         #9BD7E7;
  --sec-teal-mid:    #3D7E8E;

  /* ---------- Tertiary palette (charts only) ---------- */
  --tert-teal-1:   #50BCAF;
  --tert-teal-2:   #A0E0CE;
  --tert-coral-1:  #E86D5D;
  --tert-coral-2:  #FF958D;
  --tert-cocoa-1:  #756152;
  --tert-cocoa-2:  #AD917D;
  --tert-amber-1:  #F2A133;
  --tert-amber-2:  #FFCF7B;
  --tert-blue-1:   #284281;
  --tert-blue-2:   #6084CC;

  /* ---------- Semantic surface + ink ---------- */
  --bg:         var(--neutral-100);   /* paper */
  --bg-raised: var(--neutral-50);
  --bg-sunken: var(--neutral-200);
  --bg-dark:   var(--teal-700);       /* inverse surface */

  --ink:        var(--teal-900);      /* primary text on light */
  --ink-soft:   var(--teal-500);      /* secondary text on light */
  --ink-muted:  #6B7A7E;              /* tertiary/meta */
  --ink-on-dark:        var(--neutral-100);
  --ink-on-dark-soft:   #B7C9CC;
  --ink-on-dark-accent: var(--green-500);

  --line:        rgba(19, 41, 47, 0.12);   /* hairline on light */
  --line-strong: rgba(19, 41, 47, 0.24);
  --line-on-dark:        rgba(243, 242, 237, 0.14);
  --line-on-dark-strong: rgba(243, 242, 237, 0.28);

  /* ---------- Accent / interactive ---------- */
  --accent:        var(--teal-700);        /* primary CTA fill on light */
  --accent-ink:    var(--green-500);       /* CTA label/glyph on dark */
  --accent-soft:   var(--green-100);       /* tint backgrounds */
  --highlight:     var(--green-500);       /* hero / focus highlight */

  /* ---------- Status (kept restrained, brand-tinted) ---------- */
  --success: #4A7A4A;
  --warning: #C68A2E;
  --danger:  #B9523F;
  --info:    var(--sec-teal-mid);

  /* ---------- Radii ---------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  14px;   /* default for cards / inputs */
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- Shadows — soft, paper-like, never neon ---------- */
  --shadow-xs: 0 1px 2px rgba(19, 41, 47, 0.06);
  --shadow-sm: 0 2px 6px rgba(19, 41, 47, 0.06), 0 1px 2px rgba(19, 41, 47, 0.04);
  --shadow-md: 0 8px 24px rgba(19, 41, 47, 0.08), 0 2px 6px rgba(19, 41, 47, 0.04);
  --shadow-lg: 0 24px 56px rgba(19, 41, 47, 0.12), 0 4px 12px rgba(19, 41, 47, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(19, 41, 47, 0.04);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);     /* @kind other */ /* default UI */
  --ease-entrance: cubic-bezier(0, 0, 0.2, 1);     /* @kind other */ /* enter */
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);     /* @kind other */ /* exit */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2); /* @kind other */ /* gentle overshoot */
  --dur-quick:  120ms;  /* @kind other */
  --dur-base:   220ms;  /* @kind other */
  --dur-slow:   360ms;  /* @kind other */
  --dur-grand:  640ms;  /* @kind other */ /* hero reveals */

  /* ---------- Type scale ---------- */
  /* Display & headings — Tiempos serif, light, generous tracking-negative.
     Body & UI — General Sans, regular/medium. */
  --fs-display-1: clamp(56px, 7.2vw, 104px);  /* @kind font */ /* hero */
  --fs-display-2: clamp(44px, 5.4vw, 80px);   /* @kind font */
  --fs-h1: clamp(36px, 3.6vw, 56px);          /* @kind font */
  --fs-h2: clamp(28px, 2.6vw, 40px);          /* @kind font */
  --fs-h3: 28px;        /* @kind font */
  --fs-h4: 22px;        /* @kind font */
  --fs-h5: 18px;        /* @kind font */
  --fs-lead: 20px;      /* @kind font */
  --fs-body: 17px;      /* @kind font */
  --fs-body-sm: 15px;   /* @kind font */
  --fs-meta: 13px;      /* @kind font */
  --fs-eyebrow: 12px;   /* @kind font */

  --lh-tight: 1.05;  /* @kind other */
  --lh-snug:  1.18;  /* @kind other */
  --lh-base:  1.5;   /* @kind other */
  --lh-loose: 1.65;  /* @kind other */

  --tracking-tightest: -0.025em;
  --tracking-tight:    -0.012em;
  --tracking-base:      0;
  --tracking-wide:      0.04em;
  --tracking-eyebrow:   0.14em;   /* small uppercase labels */
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.v-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.v-display-1, h1.v-display-1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-display-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tightest);
  color: var(--ink);
  text-wrap: balance;
}
.v-display-2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-display-2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tightest);
  color: var(--ink);
  text-wrap: balance;
}

.v-h1, h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-wrap: balance;
}
.v-h2, h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-wrap: balance;
}
.v-h3, h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.v-h4, h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--ink);
}
.v-h5, h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h5);
  line-height: 1.35;
  color: var(--ink);
}

.v-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--ink-soft);
  text-wrap: pretty;
}
.v-body, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--ink);
  text-wrap: pretty;
}
.v-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-base);
  color: var(--ink);
}
.v-meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--ink-muted);
}

/* Editorial pull-quote / emphasis */
.v-quote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.35;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-soft);
  text-wrap: balance;
}

/* Italic emphasis — uses a softened 7° oblique slant rather than the default
   ~14° italic. Tiempos ships as Regular only, so this is a synthesized slant
   on the upright form; the gentler angle reads as editorial emphasis without
   the steep "fake italic" tilt. Applied globally to `em` and to .v-emphasis. */
em,
.v-emphasis {
  font-style: oblique 7deg;
}

.v-emphasis {
  color: var(--teal-700);
}

code, .v-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--neutral-200);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
}