/* =========================================================
   SPL Design Tokens
   ---------------------------------------------------------
   Fonts: extracted from the provided PDF (subset TTFs).
   Colors: sampled from the PDF screenshots.
   ========================================================= */

/* ---------- Font faces ---------- */
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/RobotoCondensed-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Typography */
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Roboto Condensed", "Roboto", system-ui, sans-serif;
  --font-script: "Kalam", cursive;

  --line: 1.55;

  /* Layout */
  --container: 1200px;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.10);
  --shadow-card: 0 8px 24px rgba(28, 33, 59, 0.08);

  /* Reference design colors */
  --color-navy-900: #1c203a;       /* dark navy for sections */
  --color-navy-700: #384275;       /* header navy */
  --color-green: #3ea862;          /* primary green accent */
  --color-green-dk: #2f7e4a;       /* darker green */
  --color-green-lt: #9fd3b1;       /* light green */
  --color-mint: #8ccba1;           /* mint section background */

  /* Brand colors - updated to match reference */
  --color-text: #333333;           /* body text */
  --color-muted: #999999;          /* muted grey */
  --color-border: #e1e3ea;         /* light border */
  --color-border-2: #e6e6e6;       /* alternate border */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-muted: #f5f5f5;
  --color-surface-dark: #1c203a;   /* dark sections */

  --color-primary: #384275;        /* primary navy (header, buttons) */
  --color-primary-ink: #ffffff;

  --color-teal: #086a61;           /* directory search button */
  --color-teal-ink: #ffffff;

  --color-accent: #3ea862;         /* green highlight (was yellow) */
  --color-success: #3ea862;        /* green check/badge */
  --color-link: #824bd8;           /* purple state links */
  --color-star: #fbbc02;           /* Google star color */
  --color-star-blue: #567ec8;      /* google rating stars (directory cards) */

  --color-topbar: #dbdbdb;         /* top utility bar background */
  --color-navbar: #384275;         /* nav background - now navy */

  /* Care type chips */
  --chip-assisted: #9fd3b1;
  --chip-memory: #81dce1;
  --chip-independent: #8aaeda;
  --chip-lifeplan: #d8caff;
  --chip-ccrc: #9ca0ba;
  --chip-all: #e1e3ea;

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(56, 66, 117, 0.25);
}