/* ============================================================
   SUPPORTE · COLORS
   Cores proprietárias: Chumbo (graphite) + Laranja (orange).
   Chumbo  RGB 88 89 91   #58595B   Pantone 425 C
   Laranja RGB 243 112 33 #F37021   Pantone 158 C
   ============================================================ */
:root{
  /* --- Brand: Laranja (orange) --- */
  --orange-50:#fef3ec;
  --orange-100:#fde0cc;
  --orange-200:#fbc29b;
  --orange-300:#f8a066;
  --orange-400:#f5883f;
  --orange-500:#f37021; /* brand laranja */
  --orange-600:#d95e15;
  --orange-700:#b44a10;
  --orange-800:#8f3b12;
  --orange-900:#743212;

  /* --- Brand: Chumbo (graphite / neutral) --- */
  --graphite-50:#f5f5f6;
  --graphite-100:#e9e9ea;
  --graphite-200:#d3d3d5;
  --graphite-300:#b4b4b7;
  --graphite-400:#8a8a8d;
  --graphite-500:#6e6e71;
  --graphite-600:#58595b; /* brand chumbo */
  --graphite-700:#454547;
  --graphite-800:#333335;
  --graphite-900:#212123;
  --graphite-950:#131314;
  --white:#ffffff;

  /* --- Support / semantic (derived, harmonious with brand) --- */
  --success-500:#3f9d5a;
  --success-100:#e2f2e7;
  --warning-500:#f0a825;
  --warning-100:#fdf1da;
  --danger-500:#d23f34;
  --danger-100:#f8e0de;
  --info-500:#2f8fb4;   /* turquoise/blue — the "emergent" secondary from the brandbook */
  --info-100:#e0f0f5;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */
  --brand:var(--orange-500);
  --brand-hover:var(--orange-600);
  --brand-active:var(--orange-700);
  --brand-subtle:var(--orange-50);
  --brand-contrast:var(--white);

  --text-strong:var(--graphite-900);
  --text-body:var(--graphite-700);
  --text-muted:var(--graphite-500);
  --text-subtle:var(--graphite-400);
  --text-on-brand:var(--white);
  --text-inverse:var(--white);
  --text-link:var(--orange-600);
  --text-link-hover:var(--orange-700);

  --surface-page:var(--white);
  --surface-raised:var(--white);
  --surface-sunken:var(--graphite-50);
  --surface-card:var(--white);
  --surface-inverse:var(--graphite-900);
  --surface-brand:var(--orange-500);

  --border-subtle:var(--graphite-100);
  --border-default:var(--graphite-200);
  --border-strong:var(--graphite-300);
  --border-focus:var(--orange-500);

  --focus-ring:color-mix(in srgb, var(--orange-500) 40%, transparent);
}