/**
 * Design tokens – color variables
 * Use these in your CSS: var(--primary), var(--base-100), etc.
 */

:root {
  /* Primary */
  --primary: #1e4d2b;
  --primary-light: #42694d; /* or primary + 16% white */
  --primary-bg-light: #e4eae6; /* light primary tint (sidebar active, badges) */

  /* Base / neutrals */
  --base-50: #ffffff;
  --base-75: #f5f6fb; /* input background */
  --base-100: #f4f5f9; /* subtle fills (tab tracks, table headers) */
  /* Page canvas behind elevated white surfaces (sidebar, cards) */
  --page-bg: #f7f7f7;
  --base-200: #e9eaed; /* button bg, border, separator */
  --base-600: #8d8e90; /* inactive link text & icon */
  /* Muted / secondary text: stronger gray than 600, softer than body (900) */
  --base-700: #4d5054;
  --base-900: #262526; /* primary, active text */

  /* Subtle hover — sidebar nav, advisor row, etc. (lighter than --primary-bg-light) */
  --surface-hover-subtle: color-mix(in srgb, var(--primary) 5%, var(--base-50));
  --text-hover-from-base: color-mix(
    in srgb,
    var(--primary) 22%,
    var(--base-900)
  );
  --text-hover-from-muted: color-mix(
    in srgb,
    var(--primary) 28%,
    var(--base-600)
  );

  /* Step / progress */
  --step-color: #1151f3;

  /* Success */
  --success: #009b51;
  --success-light: #d9f0e5;

  /* Danger */
  --danger: #f31155;
  --danger-light: #fddbe6;

  /* Warning */
  --warning: #ffae11;
  --warning-light: #fff3db;

  /* Typography – DM Sans */
  --font-sans: "DM Sans", sans-serif;

  /* Header: semibold 32px */
  --text-header-size: 32px;
  --text-header-weight: 600;

  /* Subtitle: semibold 24px */
  --text-subtitle-size: 24px;
  --text-subtitle-weight: 600;

  /* Title: semibold 20px */
  --text-title-size: 20px;
  --text-title-weight: 600;

  /* Body semibold / Body regular: 16px */
  --text-body-size: 18px;
  --text-body-weight-regular: 400;
  --text-body-weight-semibold: 600;

  /* Body small: regular 14px */
  --text-body-small-size: 16px;
  --text-body-small-weight: 400;

  /* Body xsmall: regular 12px */
  --text-body-xsmall-size: 12px;
  --text-body-xsmall-weight: 400;

  /* Right column (benefits + header announcements): inner stack max width */
  --benefits-right-column-max: 450px;

  /* Header card + announcement row: two columns side-by-side only at this min width (styles.css; media queries use 1440px literal) */
  --header-announcement-split-min: 1440px;
}