/* ==========================================================================
   FixDebtUSA — Design Tokens
   Values taken verbatim from the source application's compiled stylesheet.
   All colours are stored as bare HSL triplets so they can be used with an
   alpha channel:  hsl(var(--primary) / .12)
   ========================================================================== */

:root {
  /* ---- Surfaces ---- */
  --background: 210 20% 98%;
  --foreground: 220 20% 12%;
  --card: 0 0% 100%;
  --card-foreground: 220 20% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 20% 12%;

  /* ---- Brand ---- */
  --primary: 122 40% 34%;
  --primary-foreground: 0 0% 100%;
  --primary-light: 122 40% 44%;
  --primary-dark: 122 40% 24%;
  --secondary: 122 30% 92%;
  --secondary-foreground: 122 40% 24%;

  /* ---- Support ---- */
  --muted: 210 20% 96%;
  --muted-foreground: 215 15% 55%;
  --accent: 42 100% 50%;
  --accent-foreground: 220 20% 12%;
  --success: 122 40% 34%;
  --success-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  /* ---- Lines & focus ---- */
  --border: 214 20% 88%;
  --input: 214 20% 88%;
  --ring: 122 40% 34%;

  /* ---- Radii ---- */
  --radius: 0.625rem;          /* inputs, small controls */
  --radius-btn: 0.75rem;       /* buttons, option tiles  */
  --radius-card: 1rem;         /* panels, cards          */

  /* ---- Gradients ---- */
  --gradient-primary: linear-gradient(135deg, hsl(122 40% 34%), hsl(122 45% 45%));
  --gradient-hero: linear-gradient(180deg, hsl(122 30% 95%) 0%, hsl(0 0% 100%) 100%);
  --gradient-urgency: linear-gradient(135deg, hsl(122 40% 28%), hsl(122 50% 38%));

  /* ---- Shadows ---- */
  --shadow-card: 0 2px 16px -4px hsl(220 20% 12% / .08), 0 1px 4px -2px hsl(220 20% 12% / .05);
  --shadow-elevated: 0 8px 32px -8px hsl(122 40% 34% / .2), 0 2px 8px -2px hsl(220 20% 12% / .08);
  --shadow-timer: 0 4px 24px -4px hsl(122 40% 24% / .4);

  /* ---- Layout ---- */
  --container-funnel: 36rem;   /* 576px — the 4 funnel steps          */
  --container-wide: 42rem;     /* 672px — thank-you page              */
  --container-legal: 55rem;    /* 880px — legal prose column          */
  --container-shell: 115rem;   /* 1840px — header, footer, breadcrumb */

  /* ---- Type ---- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   Bootstrap 5.3 variable overrides — makes .btn-primary, .text-primary,
   .bg-primary, .form-control focus states, etc. inherit the brand palette.
   ========================================================================== */

:root,
[data-bs-theme="light"] {
  --bs-body-font-family: var(--font-sans);
  --bs-body-bg: hsl(var(--background));
  --bs-body-color: hsl(var(--foreground));
  --bs-body-font-size: 1rem;

  --bs-primary: hsl(var(--primary));
  --bs-primary-rgb: 52, 121, 54;
  --bs-secondary-color: hsl(var(--muted-foreground));

  --bs-border-color: hsl(var(--border));
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: 0.5rem;
  --bs-border-radius-lg: var(--radius-card);
  --bs-border-radius-xl: 1.25rem;

  --bs-link-color: hsl(var(--primary));
  --bs-link-hover-color: hsl(var(--primary-dark));
  --bs-link-color-rgb: 52, 121, 54;

  --bs-danger: hsl(var(--destructive));
  --bs-danger-rgb: 239, 68, 68;
  --bs-form-invalid-color: hsl(var(--destructive));
  --bs-form-invalid-border-color: hsl(var(--destructive));

  --bs-focus-ring-color: hsl(var(--ring) / .25);
  --bs-focus-ring-width: 3px;
}