/*
  Design tokens (CSS custom properties).
  Load this file before any other stylesheet that uses var(--color-*).
*/
:root {
  /* ── Brand ── */
  --color-primary: #E32535;
  --color-primary-dark: #D00025;
  --color-header-bg: #FF5757;

  /* ── Text ── */
  --color-text: #333333;
  --color-text-muted: #737373;

  /* ── Surfaces ── */
  --color-surface: #FFFFFF;
  --color-surface-muted: #F9F9F9;
  --color-surface-dark: #333333;

  /* ── Borders ── */
  --color-border: #D4D4D4;
  --color-border-strong: #8F8F8F;
  --color-border-soft: #F4E2D5;

  /* ── Status: success ── */
  --color-success: #5DA34D;
  --color-success-dark: #367B24;
  --color-success-bg: #F1F8EE;
  --color-success-bg-soft: rgba(93, 163, 77, 0.1);
  --color-success-bg-soft-strong: rgba(93, 163, 77, 0.18);

  /* ── Status: warning / danger ── */
  --color-warning: #F96119;
  --color-warning-dark: #C43200;
  --color-warning-bg-soft: rgba(249, 97, 25, 0.1);

  /* ── Status: info / neutral tag ── */
  --color-info: #6893D5;
  --color-info-dark: #436CAB;
  --color-info-bg-soft: rgba(104, 147, 213, 0.1);

  /* ── Highlight gradient (promo cards, budget frame) ── */
  --color-highlight-gradient-start: #FFF6F2;
  --color-highlight-gradient-end: #FFFBF7;

  /* ── Overlays ── */
  --color-overlay: rgba(0, 0, 0, 0.25);
  --color-overlay-dark: rgba(15, 15, 15, 0.35);
  --color-overlay-ghost: rgba(255, 255, 255, 0.15);

  /* ── Shadows ── */
  --shadow-default: 0px 4px 8px rgba(0, 0, 0, 0.1);
}