/* ==========================================================================
   Senior Saver — Design Tokens
   Kura's visual editor edits THIS file (designTokens.source).
   Change a value here and it updates everywhere across the site.
   ========================================================================== */

:root {
  /* -- Brand color: Senior Saver red -------------------------------------- */
  --ss-red: #da251e;          /* primary brand / accent  */
  --ss-red-600: #b81c16;      /* hover / pressed         */
  --ss-red-700: #8f1611;      /* deep red on light       */
  --ss-red-050: #fdeceb;      /* soft red tint surface   */
  --ss-red-100: #fbd9d7;

  /* -- Deep neutrals (navy/ink) ------------------------------------------- */
  --ink: #0b1628;             /* darkest — dark sections, headings */
  --ink-800: #12203a;
  --ink-700: #1c2942;
  --ink-500: #48546b;         /* body / muted text        */
  --ink-400: #6b7688;
  --ink-300: #8a93a6;

  /* -- Surfaces & lines --------------------------------------------------- */
  --paper: #ffffff;
  --surface: #f6f7f9;         /* light gray section bg    */
  --surface-2: #eef1f5;
  --line: #e6e9f0;            /* hairline borders         */
  --line-strong: #d4d9e3;

  /* -- Warm secondary (used sparingly for highlights) --------------------- */
  --gold: #f5a524;
  --gold-050: #fef3e0;

  /* -- Typography --------------------------------------------------------- */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* -- Radii -------------------------------------------------------------- */
  --radius-sm: 10px;
  --radius: 16px;             /* card default             */
  --radius-lg: 24px;
  --pill: 999px;              /* button pill              */

  /* -- Shadows ------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(11, 22, 40, 0.06), 0 1px 3px rgba(11, 22, 40, 0.09);
  --shadow-md: 0 10px 30px rgba(11, 22, 40, 0.10);
  --shadow-lg: 0 24px 60px rgba(11, 22, 40, 0.16);
  --shadow-red: 0 12px 28px rgba(218, 37, 30, 0.30);

  /* -- Layout ------------------------------------------------------------- */
  --maxw: 1200px;
  --gutter: 24px;
}