/* ============================================================
   LongevityDoc Design System — colors_and_type.css
   Source of truth for color tokens and type scale.
   Sourced from the LONGEVITY Design System Figma file.
   ============================================================ */

/* ----------- FONTS ----------- */
/* Space Grotesk is the brand display font (used 4× in the Figma at 40/21/17/15 px).
   The user shipped Light and Regular only — Medium/Bold are synthesized when needed.
   Inter / Inter Tight handle UI and body text. */
@font-face {
  font-family: "Space Grotesk";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/SpaceGrotesk-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Space Grotesk";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/SpaceGrotesk-Regular.ttf") format("truetype");
}
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700&display=swap");

:root {
  /* === BRAND CORE === */
  --ld-royal-blue:        #02246B;  /* primary action, text emphasis */
  --ld-royal-blue-deep:   #001C57;  /* gradient stop / pressed */
  --ld-royal-blue-mid:    #1F438E;  /* gradient stop */
  --ld-royal-blue-hover:  #355089;  /* solid hover */
  --ld-royal-blue-ink:    #011337;  /* body text on light */
  --ld-royal-blue-100:    #A0BEFD;  /* accent / tint */

  /* === GOLD (secondary) === */
  --ld-gold:              #BF9B30;
  --ld-gold-hover:        #D6B75C;
  --ld-gold-tint:         #F2E8CA;

  /* === DEEP RED (accent / urgent) === */
  --ld-red:               #A6054C;
  --ld-red-hover:         #F81B7D;
  --ld-red-tint:          #FEE6F1;

  /* === SEMANTIC === */
  --ld-success:           #05A64B;
  --ld-warning:           #D2A400;
  --ld-error:             #A6054C;
  --ld-error-text:        #F17777;
  --ld-info:              #1F438E;

  /* === NEUTRALS === */
  --ld-white:             #FFFFFF;
  --ld-snow:              #F8FAFC;     /* page background tint */
  --ld-cloud:             #F2F2F2;     /* alt surface */
  --ld-line:              #E7E9ED;     /* hairline / input border */
  --ld-line-soft:         #E5E5E5;
  --ld-placeholder:       #CCD3E1;     /* placeholder text */
  --ld-mute:              #B9C1D2;
  --ld-text-soft:         #7A8294;     /* secondary text */
  --ld-text:              #011337;     /* primary text */
  --ld-text-inverse:      #FFFFFF;

  /* === SURFACES === */
  --ld-bg:                var(--ld-snow);
  --ld-surface:           var(--ld-white);
  --ld-surface-dark:      var(--ld-royal-blue);

  /* === GRADIENTS === */
  --ld-gradient-royal:    linear-gradient(180deg, #1F438E 0%, #001C57 100%);
  --ld-gradient-royal-radial:
                          radial-gradient(120% 100% at 30% 0%, #355089 0%, #02246B 55%, #001C57 100%);
  --ld-gradient-gold:     linear-gradient(180deg, #D6B75C 0%, #BF9B30 100%);

  /* === SHADOWS / ELEVATION === */
  --ld-shadow-inset-light:  inset 0 0 28px 0 rgba(255,255,255,0.5);
  --ld-shadow-inset-soft:   inset 0 0 20px 0 rgba(255,255,255,0.3);
  --ld-shadow-card:         0 1px 2px rgba(1,19,55,0.04), 0 8px 24px rgba(1,19,55,0.06);
  --ld-shadow-card-lg:      0 4px 12px rgba(1,19,55,0.06), 0 24px 56px rgba(1,19,55,0.10);
  --ld-shadow-focus:        0 0 0 3px rgba(2,36,107,0.08);

  /* === RADII === */
  --ld-radius-xs:         5px;
  --ld-radius-sm:         8px;
  --ld-radius-md:         16px;       /* default inputs, buttons, toasts */
  --ld-radius-lg:         24px;
  --ld-radius-xl:         32px;
  --ld-radius-2xl:        40px;       /* large surface cards */
  --ld-radius-pill:       999px;

  /* === SPACING (8px base) === */
  --ld-space-1: 4px;
  --ld-space-2: 8px;
  --ld-space-3: 12px;
  --ld-space-4: 16px;
  --ld-space-5: 20px;
  --ld-space-6: 24px;
  --ld-space-8: 32px;
  --ld-space-10: 40px;
  --ld-space-12: 48px;
  --ld-space-16: 64px;
  --ld-space-20: 80px;

  /* === FONT FAMILIES === */
  /* Display: Space Grotesk — the brand display face. Used for H1/H2/H3, big
     numerics, hero headlines. Regular (400) and Light (300) are the two
     shipped weights; synth-bold is acceptable for emphasis. */
  --ld-font-display: "Space Grotesk", "Inter Tight", Inter, system-ui, sans-serif;
  /* UI / body: Inter is the workhorse. */
  --ld-font-sans:    Inter, "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ld-font-mono:    "Space Grotesk", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* === TYPE SCALE (Figma names → sizes) === */
  /* Display headers — Space Grotesk Regular (400). Title sizes can use Light
     (300) for an editorial feel. Body uses Inter Medium (500). */
  --ld-h1-size: 64px;  --ld-h1-lh: 1.05;  --ld-h1-weight: 400;
  --ld-h2-size: 48px;  --ld-h2-lh: 1.10;  --ld-h2-weight: 400;
  --ld-h3-size: 40px;  --ld-h3-lh: 1.15;  --ld-h3-weight: 400;
  --ld-t1-size: 32px;  --ld-t1-lh: 1.20;  --ld-t1-weight: 400;
  --ld-t2-size: 24px;  --ld-t2-lh: 1.25;  --ld-t2-weight: 400;
  --ld-t3-size: 21px;  --ld-t3-lh: 1.30;  --ld-t3-weight: 500;
  --ld-b1-size: 17px;  --ld-b1-lh: 1.45;  --ld-b1-weight: 500;
  --ld-b2-size: 15px;  --ld-b2-lh: 1.50;  --ld-b2-weight: 500;
  --ld-b3-size: 15px;  --ld-b3-lh: 1.50;  --ld-b3-weight: 400;
  --ld-c1-size: 13px;  --ld-c1-lh: 1.40;  --ld-c1-weight: 500;
  --ld-c2-size: 12px;  --ld-c2-lh: 1.35;  --ld-c2-weight: 500;
}

/* ----------- BASE ----------- */
html, body {
  font-family: var(--ld-font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ld-text);
  background: var(--ld-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----------- SEMANTIC TYPE ----------- */
.ld-h1, h1.ld {
  font-family: var(--ld-font-display);
  font-weight: var(--ld-h1-weight);
  font-size: var(--ld-h1-size);
  line-height: var(--ld-h1-lh);
  letter-spacing: -0.02em;
  color: var(--ld-text);
}
.ld-h2, h2.ld {
  font-family: var(--ld-font-display);
  font-weight: var(--ld-h2-weight);
  font-size: var(--ld-h2-size);
  line-height: var(--ld-h2-lh);
  letter-spacing: -0.015em;
  color: var(--ld-text);
}
.ld-h3, h3.ld {
  font-family: var(--ld-font-display);
  font-weight: var(--ld-h3-weight);
  font-size: var(--ld-h3-size);
  line-height: var(--ld-h3-lh);
  letter-spacing: -0.01em;
  color: var(--ld-text);
}
.ld-t1 { font-family: var(--ld-font-display); font-weight: 400; font-size: var(--ld-t1-size); line-height: var(--ld-t1-lh); color: var(--ld-text); }
.ld-t2 { font-family: var(--ld-font-display); font-weight: 400; font-size: var(--ld-t2-size); line-height: var(--ld-t2-lh); color: var(--ld-text); }
.ld-t3 { font-family: var(--ld-font-sans); font-weight: 500; font-size: var(--ld-t3-size); line-height: var(--ld-t3-lh); color: var(--ld-text); }

.ld-b1, p.ld { font-family: var(--ld-font-sans); font-weight: 500; font-size: var(--ld-b1-size); line-height: var(--ld-b1-lh); color: var(--ld-text); }
.ld-b2 { font-family: var(--ld-font-sans); font-weight: 500; font-size: var(--ld-b2-size); line-height: var(--ld-b2-lh); color: var(--ld-text); }
.ld-b3 { font-family: var(--ld-font-sans); font-weight: 400; font-size: var(--ld-b3-size); line-height: var(--ld-b3-lh); color: var(--ld-text); }

.ld-caption { font-family: var(--ld-font-sans); font-weight: 500; font-size: var(--ld-c1-size); line-height: var(--ld-c1-lh); color: var(--ld-text-soft); }
.ld-caption-sm { font-size: var(--ld-c2-size); color: var(--ld-text-soft); }
.ld-overline { font-family: var(--ld-font-sans); font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ld-text-soft); }

/* utility */
.ld-text-soft { color: var(--ld-text-soft); }
.ld-text-inverse { color: var(--ld-text-inverse); }
.ld-text-brand { color: var(--ld-royal-blue); }
.ld-text-gold { color: var(--ld-gold); }