/* ============================================================
   TSA — Color tokens
   Sourced from the TSA brand guideline (Figma: Color spec slide)
   ============================================================ */
:root {
  /* —— Core brand —— */
  --tsa-blue: #00aeef;      /* primary brand blue */
  --tsa-black: #000000;     /* logo + headline black */
  --tsa-white: #ffffff;
  --tsa-ink: #3d3935;       /* warm near-black: body text & hairlines */

  /* —— Expressive secondary palette ("Express Yourself") —— */
  --tsa-lime: #98ce00;
  --tsa-green: #40ae49;
  --tsa-yellow: #ffc70a;
  --tsa-orange: #f68f1d;
  --tsa-red: #ed3745;
  --tsa-maroon: #9d1c06;

  /* —— Neutrals —— */
  --tsa-gray-100: #f4f4f3;
  --tsa-gray-200: #e7e6e4;
  --tsa-gray-300: #cdcdcd;
  --tsa-gray-500: #8a8784;
  --tsa-gray-700: #5b5854;

  /* —— Semantic aliases —— */
  --color-bg: var(--tsa-white);
  --color-bg-muted: var(--tsa-gray-100);
  --color-bg-ink: var(--tsa-ink);
  --color-bg-black: var(--tsa-black);

  --color-text: var(--tsa-ink);
  --color-text-strong: var(--tsa-black);
  --color-text-muted: var(--tsa-gray-700);
  --color-text-inverse: var(--tsa-white);
  --color-text-brand: var(--tsa-blue);

  --color-primary: var(--tsa-blue);
  --color-primary-ink: var(--tsa-white);
  --color-accent: var(--tsa-orange);

  --color-border: var(--tsa-gray-300);
  --color-border-strong: var(--tsa-ink);
  --color-hairline: rgba(61, 57, 53, 0.16);

  /* Status (drawn from the expressive palette) */
  --color-success: var(--tsa-green);
  --color-warning: var(--tsa-yellow);
  --color-danger: var(--tsa-red);
  --color-info: var(--tsa-blue);
}