/* ============================================================
   Direlda Design System — Tokens
   Drop this into any HTML and you have the brand on tap.
   ============================================================ */

/* Plus Jakarta Sans is a SUBSTITUTE for the template's real face,
   which we could not extract from the preview-only Figma PNGs.
   Swap @import with a local @font-face when the licensed font is
   provided. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ────────────────────────────────────────────────────────
     Color — base palette
     ──────────────────────────────────────────────────────── */

  /* Primary indigo — buttons, links, icons, brand mark */
  --indigo-500: #0F54D3;          /* default brand color */
  --indigo-600: #0A44B0;          /* hover */
  --indigo-700: #08378F;          /* pressed */
  --indigo-100: #EEF0FB;          /* tinted icon background */
  --indigo-50:  #F4F6FE;          /* subtle indigo wash */

  /* Neutrals — navy → slate → mist */
  --navy-900:   #0B1A4A;          /* headings + emphasis */
  --slate-700:  #2B3658;          /* secondary headings */
  --slate-500:  #5C6280;          /* body */
  --slate-400:  #8A91A8;          /* placeholder / muted */
  --hairline:   #E5E8F0;          /* borders, dividers */
  --mist-100:   #F4F5F9;          /* section/input fill */
  --mist-50:    #FAFBFD;          /* off-white */
  --white:      #FFFFFF;

  /* Semantic — these are aliases. Always use semantic in components. */
  --color-bg:           var(--white);
  --color-bg-alt:       var(--mist-100);
  --color-bg-card:      var(--white);
  --color-bg-input:     var(--mist-100);
  --color-bg-cta:       var(--indigo-500);

  --color-fg:           var(--navy-900);     /* default text */
  --color-fg-heading:   var(--navy-900);
  --color-fg-body:      var(--slate-500);
  --color-fg-muted:     var(--slate-400);
  --color-fg-on-cta:    var(--white);
  --color-fg-link:      var(--indigo-500);

  --color-accent:       var(--indigo-500);
  --color-accent-hover: var(--indigo-600);
  --color-accent-press: var(--indigo-700);

  --color-border:       var(--hairline);
  --color-icon:         var(--indigo-500);
  --color-icon-bg:      var(--indigo-100);

  /* Direlda intentionally does not use red/green/yellow.
     If you must signal error/success, route through indigo +
     iconography. These tokens exist for system-required cases only. */
  --color-danger:       #C7203B;
  --color-success:      #1F7A4A;

  /* ────────────────────────────────────────────────────────
     Type — family, weights, scale
     ──────────────────────────────────────────────────────── */

  /* Primary face. Plus Jakarta Sans is our visual match to the template.
     Swap to --font-sans-inter to fall back to Inter (the face sampled in
     the Figma metadata) when you want a more neutral, workhorse look. */
  --font-sans:        'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-sans-inter:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display:     var(--font-sans);  /* same family, heavier weight */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Display + heading scale */
  --text-display-size:    64px;
  --text-display-lh:      1.05;
  --text-display-weight:  700;
  --text-display-tracking:-0.01em;

  --text-h1-size:    48px;
  --text-h1-lh:      1.1;
  --text-h1-weight:  700;
  --text-h1-tracking:-0.005em;

  --text-h2-size:    32px;
  --text-h2-lh:      1.15;
  --text-h2-weight:  700;
  --text-h2-tracking:0;

  --text-h3-size:    22px;
  --text-h3-lh:      1.2;
  --text-h3-weight:  700;
  --text-h3-tracking:0;

  --text-lead-size:  18px;
  --text-lead-lh:    1.5;
  --text-lead-weight:500;

  --text-body-size:  16px;
  --text-body-lh:    1.55;
  --text-body-weight:500;

  --text-small-size: 14px;
  --text-small-lh:   1.5;
  --text-small-weight:500;

  --text-pill-size:  14px;
  --text-pill-lh:    1;
  --text-pill-weight:600;

  /* ────────────────────────────────────────────────────────
     Radii
     ──────────────────────────────────────────────────────── */
  --radius-pill:   999px;       /* buttons, tag pills */
  --radius-card:   24px;        /* form card, newsletter bar */
  --radius-photo:  20px;        /* caregiver / building cards */
  --radius-input:  12px;
  --radius-sm:     8px;

  /* ────────────────────────────────────────────────────────
     Shadows
     ──────────────────────────────────────────────────────── */
  --shadow-card:  0 24px 64px -16px rgba(11, 26, 74, 0.18);
  --shadow-soft:  0 4px 12px rgba(11, 26, 74, 0.06);
  --shadow-focus: 0 0 0 4px rgba(15, 84, 211, 0.18);

  /* ────────────────────────────────────────────────────────
     Spacing — 4pt grid
     ──────────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 120px;

  /* ────────────────────────────────────────────────────────
     Motion
     ──────────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    150ms;
  --dur-base:    200ms;
  --dur-medium:  300ms;
  --dur-slow:    400ms;

  /* ────────────────────────────────────────────────────────
     Layout
     ──────────────────────────────────────────────────────── */
  --content-max:  1280px;
  --content-pad-x:120px;
  --section-pad-y:96px;
}

/* ============================================================
   Semantic typography defaults — applied to bare HTML so
   prose just works.
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-lh);
  color: var(--color-fg-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  color: var(--color-fg-heading);
  font-weight: var(--fw-bold);
  letter-spacing: -0.005em;
  margin: 0;
}
h1 { font-size: var(--text-h1-size);     line-height: var(--text-h1-lh); }
h2 { font-size: var(--text-h2-size);     line-height: var(--text-h2-lh); }
h3 { font-size: var(--text-h3-size);     line-height: var(--text-h3-lh); }

.display {
  font-size: var(--text-display-size);
  line-height: var(--text-display-lh);
  font-weight: var(--text-display-weight);
  letter-spacing: var(--text-display-tracking);
  color: var(--color-fg-heading);
}

.lead {
  font-size: var(--text-lead-size);
  line-height: var(--text-lead-lh);
  font-weight: var(--text-lead-weight);
  color: var(--color-fg-body);
}

p { margin: 0; color: var(--color-fg-body); }
a { color: var(--color-fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--color-accent-hover); }

::selection { background: var(--indigo-100); color: var(--navy-900); }

/* Reusable element styles */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid var(--hairline);
  font-size: var(--text-pill-size);
  font-weight: var(--text-pill-weight);
  line-height: var(--text-pill-lh);
  color: var(--navy-900);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  border: none;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn-primary {
  background: var(--indigo-500);
  color: var(--white);
}
.btn-primary:hover { background: var(--indigo-600); }
.btn-primary:active { background: var(--indigo-700); transform: scale(0.98); }

.btn-white {
  background: var(--white);
  color: var(--navy-900);
  border: 1px solid var(--hairline);
}
.btn-white:hover { background: var(--mist-50); }
.btn-white:active { transform: scale(0.98); }