:root {
  /* Typography */
  --font-sans: 'Public Sans', sans-serif;

  /* =========================
     BRAND BLUES (estrutura)
     ========================= */
  --brand-blue-900: #030D21;
  --brand-blue-800: #061933;
  --brand-blue-700: #0D2746;
  --brand-blue-600: #314762;
  --brand-blue-500: #56687E;
  --brand-blue-300: #929EAC;
  --brand-blue-100: #CFD4DA;
  --brand-blue-50:  #E7E9EC;

  /* =========================
     BRAND ORANGE (ação)
     ========================= */
  --brand-orange-700: #B55013;
  --brand-orange-600: #D45D16;
  --brand-orange-500: #F16A19; /* CTA / ação principal */
  --brand-orange-400: #F3803C;
  --brand-orange-300: #F5975E;
  --brand-orange-100: #FCDAC6;
  --brand-orange-50:  #FDEDE3;

  /* =========================
     NEUTRALS
     ========================= */
  --neutral-900: #111827;
  --neutral-700: #525257;
  --neutral-600: #636369;
  --neutral-500: #75757C;
  --neutral-400: #919196;
  --neutral-300: #A5A5AA;
  --neutral-200: #C1C1C4;
  --neutral-100: #DCDCDE;
  --neutral-50:  #F1F1F2;

  /* =========================
     SEMANTIC UI
     ========================= */
  --bg-app: var(--neutral-50);
  --bg-surface: #FFFFFF;
  --border-subtle: var(--neutral-100);

  --text-primary: var(--brand-blue-900);
  --text-secondary: var(--brand-blue-500);

  /* =========================
     FOCUS
     ========================= */
  --focus-ring: var(--brand-orange-400);

  /* =========================
     CTA
     ========================= */
  --cta-bg: var(--brand-orange-500);
  --cta-bg-hover: var(--brand-orange-600);
  --cta-text: #FFFFFF;

  /* =========================
     LINKS
     ========================= */
  --link: var(--brand-blue-700);
  --link-hover: var(--brand-blue-800);

  /* =========================
     STATUS SEMÂNTICO
     ========================= */

  /* INFO → azul (não compete com CTA) */
  --status-info-bg: var(--brand-blue-50);
  --status-info-text: var(--brand-blue-700);
  --status-info-border: var(--brand-blue-300);

  /* WARNING → laranja suave (atenção, não erro) */
  --status-warning-bg: var(--brand-orange-50);
  --status-warning-text: var(--brand-orange-700);
  --status-warning-border: var(--brand-orange-300);

  /* ERROR → vermelho contido (não usar laranja) */
  --status-error-bg: #FEECEC;
  --status-error-text: #B42318;
  --status-error-border: #F5B5B5;

  /* SUCCESS → verde contido (baixo ruído visual) */
  --status-success-bg: #EAF6EF;
  --status-success-text: #1F7A3A;
  --status-success-border: #9FD3AF;
}